Główne Zadanie: Animowana Świątynia Faraona

Witaj w końcowym projekcie modułu animacji! Jak Mohamed mówi: "Prawdziwy mistrz CSS animacji potrafi ożywić nawet kamienne ściany świątyni." W tym zadaniu stworzysz kompleksową animowaną stronę internetową, łącząc wszystkie techniki, które poznałeś w tym module: @keyframes, animation-iteration-count, animation-direction, animation-delay, animation-timing-function oraz właściwości skrótowe animacji.

Wyobraź sobie, że tworzysz interaktywną prezentację wirtualnej wycieczki po egipskiej świątyni. Każdy element strony powinien "ożyć" dzięki animacjom - nagłówek powinien pojawiać się z efektem, obrazki wchodzić z opóźnieniem, a przyciski reagować na interakcję użytkownika.

Cele Zadania

1. Utworzenie animacji dla nagłówka strony.
2. Animowanie obrazka, który pojawia się po pewnym czasie.
3. Animowanie przycisków, które zmieniają kolor po najechaniu myszką.
4. Tworzenie animacji dla sekcji z tekstem, która przesuwa się w górę i w dół.
5. Stworzenie animacji dla elementów listy, które pojawiają się jeden po drugim.

Krok 1: Struktura HTML

Najpierw utwórz plik HTML z poniższą strukturą:

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  <header class="main-header">
11    <h1>Witamy w Świecie Animacji CSS</h1>
12  </header>
13  <section class="image-section">
14    <img src="image.jpg" alt="Piękny widok" class="animated-image">
15  </section>
16  <section class="buttons-section">
17    <button class="animated-button">Przycisk 1</button>
18    <button class="animated-button">Przycisk 2</button>
19    <button class="animated-button">Przycisk 3</button>
20  </section>
21  <section class="text-section">
22    <p class="animated-text">To jest przykładowy tekst, który będzie się przesuwać w górę i w dół.</p>
23  </section>
24  <section class="list-section">
25    <ul>
26      <li class="animated-list-item">Element listy 1</li>
27      <li class="animated-list-item">Element listy 2</li>
28      <li class="animated-list-item">Element listy 3</li>
29    </ul>
30  </section>
31</body>
32</html>

Krok 2: Style CSS

Teraz utwórz plik CSS i dodaj następujące style oraz animacje:

1/* Podstawowe style */
2body {
3  font-family: Arial, sans-serif;
4  margin: 0;
5  padding: 0;
6  background-color: #f0f0f0;
7}
8
9.main-header {
10  background-color: #333;
11  color: #fff;
12  padding: 20px;
13  text-align: center;
14}
15
16.image-section {
17  text-align: center;
18  margin: 20px 0;
19}
20
21.buttons-section {
22  text-align: center;
23  margin: 20px 0;
24}
25
26.text-section {
27  text-align: center;
28  margin: 20px 0;
29}
30
31.list-section {
32  text-align: center;
33  margin: 20px 0;
34}
35
36.animated-image {
37  width: 300px;
38  opacity: 0;
39  animation: fadeIn 3s 1s forwards;
40}
41
42.animated-button {
43  margin: 0 10px;
44  padding: 10px 20px;
45  background-color: #008cba;
46  color: white;
47  border: none;
48  cursor: pointer;
49  transition: background-color 0.3s;
50}
51
52.animated-button:hover {
53  background-color: #005f5f;
54}
55
56.animated-text {
57  font-size: 18px;
58  animation: moveText 5s infinite alternate;
59}
60
61.animated-list-item {
62  opacity: 0;
63  animation: fadeInUp 1s ease-in-out forwards;
64}
65
66.animated-list-item:nth-child(1) {
67  animation-delay: 0.5s;
68}
69
70.animated-list-item:nth-child(2) {
71  animation-delay: 1s;
72}
73
74.animated-list-item:nth-child(3) {
75  animation-delay: 1.5s;
76}
77
78/* Definicje animacji */
79@keyframes fadeIn {
80  0% {
81    opacity: 0;
82  }
83  100% {
84    opacity: 1;
85  }
86}
87
88@keyframes moveText {
89
90  0% {
91    transform: translateY(0);
92  }
93  100% {
94    transform: translateY(-20px);
95  }
96}
97
98@keyframes fadeInUp {
99  0% {
100    opacity: 0;
101    transform: translateY(20px);
102  }
103  100% {
104    opacity: 1;
105    transform: translateY(0);
106  }
107}

Krok 3: Testowanie

Otwórz plik HTML w przeglądarce, aby zobaczyć efekty animacji. Upewnij się, że wszystkie animacje działają zgodnie z oczekiwaniami.

Zadanie

1. Animacja Nagłówka: Dodaj animację do nagłówka strony (.main-header), która zmienia kolor tła co 5 sekund, używając @keyframes i animation.
2. Animacja Obrazka: Utwórz animację dla obrazka (.animated-image), która pojawia się z efektem przesunięcia w lewo, z opóźnieniem 2 sekund.
3. Animacja Przycisków: Zmodyfikuj przyciski (.animated-button), aby po kliknięciu animowały się przez zmianę koloru na czerwony i zwiększenie rozmiaru czcionki.
4. Animacja Tekstu: Dodaj kolejną animację do tekstu (.animated-text), która zmienia jego kolor co 3 sekundy.
5. Animacja Listy: Dodaj animację do elementów listy (.animated-list-item), która powoduje, że elementy pojawiają się z efektem przesunięcia w górę i obrotu.

Wykorzystaj wszystkie przedstawione techniki, aby dodać zaawansowane efekty animacji do strony internetowej.

Podsumowanie poznanych właściwości

W tym module poznałeś następujące właściwości animacji CSS:

• @keyframes - definiowanie etapów animacji (jak kolejne sceny w opowieści o podróży Ra)
• animation-name - przypisanie animacji do elementu
• animation-duration - czas trwania jednego cyklu animacji
• animation-timing-function - kontrola tempa (linear, ease, ease-in, ease-out, cubic-bezier)
• animation-delay - opóźnienie przed rozpoczęciem animacji
• animation-iteration-count - liczba powtórzeń (wartość liczbowa lub infinite)
• animation-direction - kierunek animacji (normal, reverse, alternate, alternate-reverse)
• animation-fill-mode - stan elementu przed i po animacji (forwards, backwards, both)
• Skrót animation - wszystkie właściwości w jednej linii

Każda z tych właściwości to jak inny atrybut rytuału kapłana - razem tworzą kompletną, magiczną ceremonię animacji!

Przetestuj swoje umiejętnoś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, #0a3d62, #1e8449);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #a9dfbf;
25}
26
27.water {
28  width: 250px;
29  height: 250px;
30  margin: 0 auto;
31  background: radial-gradient(circle, rgba(30, 132, 73, 0.3), rgba(10, 61, 98, 0.5));
32  border-radius: 50%;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  border: 2px solid rgba(169, 223, 191, 0.3);
37}
38
39.lotus {
40  font-size: 80px;
41  /* Dodaj animacje bloom tutaj */
42  /* animation: bloom 5s ease-in-out infinite; */
43}
44
45/* Zdefiniuj @keyframes bloom */
46/* @keyframes bloom { */
47/*   0% { transform: scale(0.3) rotate(-30deg); opacity: 0.2; } */
48/*   50% { transform: scale(1.2) rotate(15deg); opacity: 1; } */
49/*   100% { transform: scale(1) rotate(0deg); opacity: 0.8; } */
50/* } */
51
52.hint {
53  margin-top: 30px;
54  color: #aaa;
55  font-style: italic;
56}