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

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:

Przejdź do CodeWorlds→