Zaawansowane Animacje CSS z @keyframes

W starożytnym Egipcie kapłani odprawiający rytuały powtarzali je określoną liczbę razy - czasem trzykrotnie, czasem siedmiokrotnie, a czasem nieskończenie wiele razy, aby zapewnić boską ochronę. Podobnie w CSS, animacje mogą być kontrolowane za pomocą różnych właściwości, w tym animation-iteration-count, które określa, ile razy animacja ma się powtórzyć, oraz animation-direction, które określa kierunek animacji. Poniżej przedstawiamy kilka praktycznych przykładów z wykorzystaniem tych właściwości.

Wyobraź sobie, że tworzysz animację przedstawiającą podróż słonecznej barki Ra przez niebo. Barka musi powtarzać swoją trasę codziennie - rano wyrusza ze wschodu, wieczorem dociera na zachód, a potem powraca pod ziemią, by rano znów się pojawić. To doskonała analogia do właściwości, które dziś poznamy.

animation-iteration-count

Właściwość animation-iteration-count pozwala określić, ile razy animacja ma się powtórzyć.

Przykład 1: Skacząca Piłka

Chcemy, żeby piłka skakała 3 razy.

CSS

1@keyframes bounce {
2  0%, 100% { transform: translateY(0); }
3  50% { transform: translateY(-30px); }
4}
5
6.bouncing-ball {
7  animation: bounce 1s ease-in-out;
8  animation-iteration-count: 3; /* Piłka będzie skakać 3 razy */
9}

Przykład 2: Nieskończony Obrot

Chcemy, żeby element obracał się w nieskończoność.

CSS

1@keyframes spin {
2  0% { transform: rotate(0deg); }
3  100% { transform: rotate(360deg); }
4}
5
6.infinite-spin {
7  animation: spin 2s linear infinite;
8  animation-iteration-count: infinite; /* Nieskończony obrót */
9}

animation-direction

Właściwość animation-direction określa kierunek animacji. Można ustawić różne wartości, aby uzyskać różne efekty:

• normal (domyślne) - animacja od początku do końca.
• reverse - animacja od końca do początku.
• alternate - animacja na przemian od początku do końca, a potem od końca do początku.
• alternate-reverse - animacja na przemian od końca do początku, a potem od początku do końca.

Przykład 3: Przemienne Miganie

Chcemy, żeby element zmieniał kolor na przemian.

CSS

1@keyframes blink {
2  0%, 100% { background-color: red; }
3  50% { background-color: blue; }
4}
5
6.alternate-blink {
7  animation: blink 1s linear infinite;
8  animation-direction: alternate; /* Zmiana kierunku animacji */
9}

Zaawansowane Techniki

Łączenie Właściwości

Możemy łączyć różne właściwości animacji, aby stworzyć bardziej złożone efekty.

Przykład 4: Skacząca i Obracająca się Piłka

Chcemy, żeby piłka skakała i obracała się jednocześnie, na przemian od początku do końca i od końca do początku.

CSS

1@keyframes bounce-spin {
2  0%, 100% { transform: translateY(0) rotate(0deg); }
3  50% { transform: translateY(-30px) rotate(180deg); }
4}
5
6.bouncing-spinning-ball {
7  animation: bounce-spin 2s ease-in-out infinite;
8  animation-direction: alternate; /* Skakanie i obracanie się na przemian */
9}

HTML dla Przykładów

Aby przetestować te animacje, stwórz plik HTML i dodaj odpowiednie elementy z przypisanymi klasami:

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  <title>Animacje CSS</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <div class="bouncing-ball">Piłka Skacząca</div>
11  <div class="infinite-spin">Nieskończony Obrót</div>
12  <div class="alternate-blink">Migające Elementy</div>
13  <div class="bouncing-spinning-ball">Skacząco-Obracająca się Piłka</div>
14</body>
15</html>

Podsumowanie

Właściwości animation-iteration-count i animation-direction w CSS umożliwiają tworzenie zaawansowanych animacji, które mogą być wielokrotnie powtarzane oraz zmieniać kierunek. W połączeniu z @keyframes, te właściwości pozwalają na pełną kontrolę nad wyglądem i zachowaniem elementów na stronie, co otwiera drzwi do tworzenia bardziej interaktywnych i atrakcyjnych wizualnie projektów.

Jak mawiał Mohamed: "Każda animacja, podobnie jak rytuał faraona, ma swój rytm i kierunek. Opanuj je, a Twoje strony ożyją jak malowidła w świątyni Karnaku!"

Wypróbuj te właściwości w edytorze poniżej:

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #ff9a56, #d4763a);
10  color: white;
11  min-height: 100vh;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #3d2914;
25}
26
27.desert {
28  position: relative;
29  width: 300px;
30  height: 250px;
31  margin: 0 auto;
32}
33
34.pyramid {
35  font-size: 120px;
36  color: #c9a84c;
37  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
38  position: absolute;
39  top: 20px;
40  left: 50%;
41  transform: translateX(-50%);
42  /* Dodaj animacje tutaj */
43  /* Uzyj @keyframes appear z opacity i scale */
44  /* animation: appear 3s ease-out forwards; */
45}
46
47.sand {
48  position: absolute;
49  bottom: 0;
50  width: 100%;
51  height: 60px;
52  background: linear-gradient(180deg, #d4a574, #c9a84c);
53  border-radius: 50% 50% 0 0;
54}
55
56/* Zdefiniuj @keyframes appear */
57/* 0% { opacity: 0; transform: translateX(-50%) scale(0.3); } */
58/* 100% { opacity: 1; transform: translateX(-50%) scale(1); } */
59
60.hint {
61  margin-top: 20px;
62  color: #3d2914;
63  font-style: italic;
64}