Kurs HTML i CSS · Moduł 6: Animacje CSS
Animacja CSS: Słoneczna Barka Faraona
W tej lekcji4
W starożytnym Egipcie słoneczna barka była symbolem podróży boga słońca Ra przez niebo. Wyobraźmy sobie, że chcemy animować taką barkę, przesuwającą się przez ekran, ale ma ona wypłynąć dopiero wtedy, gdy kapłani skończą hymn, czyli kilka sekund po załadowaniu strony. Animacja, która rusza od razu, zepsułaby ceremonię. Na takie sytuacje CSS ma właściwość animation-delay.
Krok 1: Zdefiniowanie @keyframes
Najpierw zdefiniujemy animację, która przesuwa barkę w poziomie. Klatka 0% to punkt startowy, a 100% to koniec rejsu:
1@keyframes sail {
2 0% { left: 0; }
3 100% { left: 100%; }
4}Właściwość left działa tylko na elementach pozycjonowanych, dlatego barka dostanie za chwilę position: absolute. Wartość left: 100% przesuwa jej lewą krawędź na prawy brzeg kontenera, czyli barka odpływa za horyzont.
Krok 2: Stosowanie Animacji z animation-delay
Teraz zastosujemy tę animację do elementu reprezentującego barkę, dodając opóźnienie 3 sekundy:
1.solar-barge {
2 position: absolute;
3 animation: sail 10s linear infinite;
4 animation-delay: 3s; /* Opóźnienie 3 sekundy */
5}Element z klasą solar-barge będzie teraz animowany z opóźnieniem 3 sekundy, co oznacza, że pozostanie nieruchomy przez te pierwsze 3 sekundy, a potem zacznie się przesuwać zgodnie ze zdefiniowanym @keyframes. Wartość linear daje stałą prędkość, bez przyspieszania i hamowania, a infinite powtarza rejs bez końca. Kolejność deklaracji ma tu znaczenie: skrót animation ustawia opóźnienie na 0, więc animation-delay musi stać po nim, inaczej skrót by je nadpisał.
Opóźnienie w skrócie
To samo zapiszesz jedną deklaracją. W skrócie animation pierwsza wartość czasu to zawsze czas trwania, a druga to opóźnienie:
1.solar-barge {
2 position: absolute;
3 animation: sail 10s linear 3s infinite;
4}Efekt jest identyczny jak w kroku 2, a kod krótszy. Tak samo działa na przykład animation: slide 2s ease 0.5s infinite: dwie sekundy ruchu, pół sekundy czekania na start.
Co się dzieje w czasie opóźnienia
Opóźnienie działa tylko raz, przed pierwszym cyklem. Przy infinite kolejne rejsy ruszają od razu, bez ponownego czekania. W czasie opóźnienia barka ma swoje zwykłe style, a nie te z klatki 0%, więc może stać w innym miejscu niż start animacji. Pomaga na to animation-fill-mode: backwards, które poznasz przy skrótach animacji. Opóźnienie może też być ujemne: -5s przy dziesięciosekundowym rejsie sprawi, że barka ruszy natychmiast, od połowy drogi.
Flota barek
Prawdziwą moc opóźnienie pokazuje przy kilku elementach. Trzy barki z tą samą animacją i opóźnieniami 0s, 1s i 2s wypłyną jedna po drugiej, jak flota w procesji, choć wszystkie korzystają z tych samych @keyframes. Nie potrzebujesz trzech animacji, wystarczy jedna i trzy różne opóźnienia.
HTML dla Barki
Twój HTML może wyglądać tak, aby reprezentować barkę. Pamiętaj o opisie w atrybucie alt:
1<div class="solar-barge">
2 <img src="solar-barge.png" alt="Słoneczna Barka Faraona">
3</div>Kontener barki niesie obraz, więc animacja przesuwa oba naraz, a sam plik graficzny się nie zmienia.
Podsumowanie
Właściwość animation-delay w CSS jest użytecznym narzędziem do dodawania opóźnienia do animacji, co pozwala na bardziej złożone i wyrafinowane efekty. Przykład ze Słoneczną Barką Faraona pokazuje, jak można tę technikę wykorzystać do tworzenia ciekawych i tematycznych animacji. Tak samo działa każda animacja z @keyframes, na przykład wirujący hieroglif z rotate(0deg) do rotate(360deg) i animation: spin 3s linear infinite. Moja rada: do przesuwania elementów zamiast left wybieraj transform: translateX(), bo przeglądarka nie musi wtedy przeliczać układu strony w każdej klatce. W projekcie głównym opóźnienia posłużą do sekwencji, w której karty pojawiają się jedna po drugiej.
W edytorze poniżej czeka pokaz zaawansowanych animacji. Skup się na dwóch sekcjach: w Animation Shorthand opóźnienie siedzi w skrócie, a w Chained Animations kolejne fazy ruszają dzięki animation-delay.
Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Zaawansowane animacje CSS</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <h1>Zaawansowane Animacje CSS</h1>
12
13 <section class="demo-section">
14 <h2>Animation Shorthand Property</h2>
15 <div class="shorthand-demo">
16 <div class="shorthand-box example1">
17 <span>slide 3s ease-in 1s 2 alternate both</span>
18 </div>
19 <div class="shorthand-box example2">
20 <span>bounce 2s linear infinite</span>
21 </div>
22 <div class="shorthand-box example3">
23 <span>rotate 1.5s ease-out 0.5s forwards</span>
24 </div>
25 </div>
26 </section>
27
28 <section class="demo-section">
29 <h2>Animation Fill Mode</h2>
30 <div class="fill-mode-demo">
31 <div class="fill-box none">none</div>
32 <div class="fill-box forwards">forwards</div>
33 <div class="fill-box backwards">backwards</div>
34 <div class="fill-box both">both</div>
35 </div>
36 <p class="help-text">Kliknij dowolne miejsce aby zrestartować animacje</p>
37 </section>
38
39 <section class="demo-section">
40 <h2>Animation Play State</h2>
41 <div class="play-state-demo">
42 <div class="play-box running">
43 <span>running</span>
44 </div>
45 <div class="play-box paused">
46 <span>paused (hover to play)</span>
47 </div>
48 </div>
49 </section>
50
51 <section class="demo-section">
52 <h2>Chained Animations (Sekwencyjne)</h2>
53 <div class="chain-demo">
54 <div class="chain-element phase1">Faza 1</div>
55 <div class="chain-element phase2">Faza 2</div>
56 <div class="chain-element phase3">Faza 3</div>
57 <div class="chain-element phase4">Faza 4</div>
58 </div>
59 </section>
60
61 <section class="demo-section">
62 <h2>Multiple Animations (Równoległe)</h2>
63 <div class="multiple-demo">
64 <div class="multi-box">
65 <span>Spin + Bounce + Color</span>
66 </div>
67 </div>
68 </section>
69
70 <section class="demo-section">
71 <h2>Responsive Animations</h2>
72 <div class="responsive-demo">
73 <div class="responsive-card">
74 <h3>Karta responsywna</h3>
75 <p>Animacja dostosowuje się do rozmiaru ekranu</p>
76 </div>
77 </div>
78 </section>
79
80 <section class="demo-section">
81 <h2>CSS-only Loading Animations</h2>
82 <div class="loading-demo">
83 <div class="loader spinner">
84 <div class="spinner-blade"></div>
85 <div class="spinner-blade"></div>
86 <div class="spinner-blade"></div>
87 <div class="spinner-blade"></div>
88 </div>
89
90 <div class="loader dots">
91 <div class="dot"></div>
92 <div class="dot"></div>
93 <div class="dot"></div>
94 </div>
95
96 <div class="loader progress">
97 <div class="progress-bar"></div>
98 </div>
99
100 <div class="loader pulse">
101 <div class="pulse-ring"></div>
102 <div class="pulse-ring"></div>
103 <div class="pulse-ring"></div>
104 </div>
105 </div>
106 </section>
107
108 <section class="demo-section">
109 <h2>3D Animations</h2>
110 <div class="threed-demo">
111 <div class="cube-3d">
112 <div class="face front">Front</div>
113 <div class="face back">Back</div>
114 <div class="face right">Right</div>
115 <div class="face left">Left</div>
116 <div class="face top">Top</div>
117 <div class="face bottom">Bottom</div>
118 </div>
119
120 <div class="flipcard">
121 <div class="flipcard-inner">
122 <div class="flipcard-front">
123 <h4>Hover me!</h4>
124 </div>
125 <div class="flipcard-back">
126 <h4>Back side!</h4>
127 </div>
128 </div>
129 </div>
130 </div>
131 </section>
132 </div>
133
134 <script>
135 // Restart animations on click
136 document.addEventListener('click', function() {
137 const fillBoxes = document.querySelectorAll('.fill-box');
138 fillBoxes.forEach(box => {
139 box.style.animation = 'none';
140 box.offsetHeight; // trigger reflow
141 box.style.animation = null;
142 });
143 });
144 </script>
145</body>
146</html>Pamiętaj: animation-delay to kapłan, który daje barce sygnał do odpłynięcia dopiero wtedy, gdy wybrzmi ostatnia nuta hymnu na cześć Ra.
Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Do czego służy właściwość animation-delay?
Zadania praktyczne w grze
- Edytor kodu
Stwórz @keyframes spin: od rotate(0deg) do rotate(360deg). Zastosuj do .hieroglyph: animation: spin 3s linear infinite. Hieroglif będzie kręcił się płynnie jak koło wodne nad Nilem!
- Układanie w poziomie
Ułóż deklarację animation z opóźnieniem w prawidłowej kolejności