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.

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>CSS @keyframes - Podstawy animacji</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>CSS @keyframes - Animacje w CSS</h1>
12
13        <section class="demo-section">
14            <h2>Podstawowe @keyframes</h2>
15            <div class="animation-demo">
16                <div class="box slide">
17                    <span>Slide Animation</span>
18                </div>
19                <div class="box bounce">
20                    <span>Bounce Animation</span>
21                </div>
22                <div class="box grow-spin">
23                    <span>Grow & Spin</span>
24                </div>
25            </div>
26        </section>
27
28        <section class="demo-section">
29            <h2>Animation Delay</h2>
30            <div class="delay-demo">
31                <div class="pyramid">Piramida</div>
32                <div class="scarab">Skarabeusz</div>
33                <div class="eye">Oko Horusa</div>
34            </div>
35            <p class="help-text">Animacje startują z różnymi opóźnieniami</p>
36        </section>
37
38        <section class="demo-section">
39            <h2>Animation Direction</h2>
40            <div class="direction-demo">
41                <div class="direction-box normal">Normal</div>
42                <div class="direction-box reverse">Reverse</div>
43                <div class="direction-box alternate">Alternate</div>
44                <div class="direction-box alternate-reverse">Alt-Reverse</div>
45            </div>
46        </section>
47
48        <section class="demo-section">
49            <h2>Animation Timing Functions</h2>
50            <div class="timing-demo">
51                <div class="timing-box linear">Linear</div>
52                <div class="timing-box ease">Ease</div>
53                <div class="timing-box ease-in">Ease-in</div>
54                <div class="timing-box ease-out">Ease-out</div>
55                <div class="timing-box ease-in-out">Ease-in-out</div>
56                <div class="timing-box cubic-bezier">Cubic-bezier</div>
57            </div>
58        </section>
59
60        <section class="demo-section">
61            <h2>Animation Iteration Count</h2>
62            <div class="iteration-demo">
63                <div class="iter-box once">1 raz</div>
64                <div class="iter-box three-times">3 razy</div>
65                <div class="iter-box infinite">Nieskończoność</div>
66            </div>
67        </section>
68
69        <section class="demo-section">
70            <h2>Complex Multi-Property Animations</h2>
71            <div class="complex-demo">
72                <div class="complex-box rainbow">
73                    <span>Rainbow Transform</span>
74                </div>
75                <div class="complex-box floating">
76                    <span>Floating Element</span>
77                </div>
78                <div class="complex-box pulsing">
79                    <span>Pulsing Heart</span>
80                </div>
81            </div>
82        </section>
83
84        <section class="demo-section">
85            <h2>Egipskie Animacje - Demonstracja Tematu</h2>
86            <div class="egyptian-demo">
87                <div class="solar-barge">Słoneczna Barka</div>
88                <div class="hieroglyph">𓂀</div>
89                <div class="sphinx">Sfinks</div>
90            </div>
91        </section>
92    </div>
93</body>
94</html>