Animacje CSS z @keyframes

Animacje CSS dają możliwość dodania ruchu i interakcji do stron internetowych bez konieczności używania JavaScriptu. Za pomocą reguły @keyframes możemy zdefiniować animacje, które przebiegają przez różne etapy, dając pełną kontrolę nad tym, jak elementy się poruszają, skalują, obracają i wiele innych.

Definiowanie Animacji za pomocą @keyframes

Użycie @keyframes pozwala na stworzenie nazwanej animacji, która składa się z różnych kroków, określonych jako procenty od 0% do 100%.

Przykład:

1@keyframes slide {
2  0% { left: 0; }
3  50% { left: 50px; }
4  100% { left: 100px; }
5}

W tym przykładzie, animacja o nazwie "slide" przesuwa element w poziomie od pozycji początkowej do 100 pikseli w prawo.

Stosowanie Animacji do Elementów

Po zdefiniowaniu animacji za pomocą @keyframes, możesz ją zastosować do dowolnego elementu za pomocą właściwości animation.

Przykład:

1div {
2  animation: slide 2s linear infinite;
3}

W tym przykładzie:

slide: Nazwa animacji zdefiniowana za pomocą @keyframes.
2s: Czas trwania animacji.
linear: Sposób przejścia między krokami (w tym przypadku, przejście jest równe).
infinite: Animacja będzie się powtarzać w nieskończoność.

Zaawansowane Techniki

Ustalanie Punktów Kontrolnych

Możesz definiować dowolną ilość punktów kontrolnych w animacji, nie tylko początek, środek i koniec.

Przykład:

1@keyframes bounce {
2  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
3  40% { transform: translateY(-30px); }
4  60% { transform: translateY(-15px); }
5}

Animacja Wielu Właściwości

W każdym etapie animacji możesz manipulować wieloma właściwościami CSS naraz.

Przykład:

1@keyframes grow-spin {
2  0% { transform: scale(1) rotate(0); }
3  50% { transform: scale(1.5) rotate(180deg); }
4  100% { transform: scale(1) rotate(360deg); }
5}

Animacje CSS z @keyframes oferują potężne narzędzie do tworzenia płynnych, responsywnych animacji bez konieczności używania skryptów. Dzięki szerokim możliwościom personalizacji i kontroli, są one idealnym rozwiązaniem dla deweloperów i projektantów, którzy chcą dodać życia i interakcji do swoich stron internetowych.

Animacja CSS z animation-delay: Przykład Nawiązujący do Starożytnego Egiptu

Czasem chcemy, żeby animacja nie rozpoczynała się natychmiast, ale z pewnym opóźnieniem. Właściwość animation-delay w CSS umożliwia ustawienie takiego opóźnienia. Aby zilustrować tę funkcję, stworzymy animację, która przywołuje obrazy starożytnego Egiptu.

Zadanie: Tworzenie Animacji Starożytnego Egiptu

Cel

Stworzenie trzech animacji inspirowanych starożytnym Egiptem, które będą wykorzystywać różne właściwości CSS, w tym @keyframes, animation oraz animation-delay.

Kroki do wykonania:

1. Struktura HTML

Utwórz nowy plik HTML z podstawową strukturą dokumentu. Dodaj trzy elementy div, które będą reprezentować piramidę, skarabeusza i oko Horusa.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css">
7  <title>Egyptian Animation</title>
8</head>
9<body>
10  <div class="pyramid"></div>
11  <div class="scarab"></div>
12  <div class="eye"></div>
13</body>
14</html>

2. Stylowanie i Animacje w CSS

Dodaj stylizację i animacje w pliku styles.css. Upewnij się, że plik CSS jest poprawnie połączony z plikiem HTML.

1body {
2  display: flex;
3  justify-content: space-around;
4  align-items: center;
5  height: 100vh;
6  background-color: #f0e68c;
7}
8
9.pyramid, .scarab, .eye {
10  width: 100px;
11  height: 100px;
12  background-color: #c0c0c0;
13  position: relative;
14}
15
16/* Animacja dla piramidy */
17@keyframes pyramid-slide {
18  0% { left: 0; }
19  50% { left: 50px; }
20  100% { left: 100px; }
21}
22
23.pyramid {
24  animation: pyramid-slide 4s linear infinite;
25}
26
27/* Animacja dla skarabeusza */
28@keyframes scarab-bounce {
29  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
30  40% { transform: translateY(-30px); }
31  60% { transform: translateY(-15px); }
32}
33
34.scarab {
35  animation: scarab-bounce 2s ease infinite;
36}
37
38/* Animacja dla oka Horusa */
39@keyframes eye-grow-spin {
40  0% { transform: scale(1) rotate(0); }
41  50% { transform: scale(1.5) rotate(180deg); }
42  100% { transform: scale(1) rotate(360deg); }
43}
44
45.eye {
46  animation: eye-grow-spin 3s ease-in-out infinite;
47}

3. Ustawienie Opóźnienia dla Animacji

Dodaj właściwość animation-delay, aby animacje zaczynały się z opóźnieniem.

1.pyramid {
2  animation: pyramid-slide 4s linear infinite;
3  animation-delay: 1s;
4}
5
6.scarab {
7  animation: scarab-bounce 2s ease infinite;
8  animation-delay: 2s;
9}
10
11.eye {
12  animation: eye-grow-spin 3s ease-in-out infinite;
13  animation-delay: 3s;
14}

Podsumowanie

Utworzyłeś trzy różne animacje inspirowane starożytnym Egiptem, korzystając z właściwości @keyframes, animation oraz animation-delay w CSS. Przeanalizuj, jak każda z tych animacji działa i jak można je dostosować do różnych potrzeb projektowych.

Przejdź do CodeWorlds→