Tâche principale : le temple animé du pharaon

Bienvenue dans le projet final du module sur les animations ! « Comme dit Mohamed : un véritable maître de l'animation CSS peut donner vie même aux murs de pierre d'un temple. » Dans cette tâche, tu vas créer une page web animée complète, en combinant toutes les techniques apprises dans ce module : @keyframes, animation-iteration-count, animation-direction, animation-delay, animation-timing-function et les propriétés raccourcies d'animation.

Imagine que tu crées une présentation interactive d'une visite virtuelle d'un temple égyptien. Chaque élément de la page doit « prendre vie » grâce aux animations - l'en-tête doit apparaître avec un effet, les images doivent entrer avec un délai et les boutons doivent réagir à l'interaction de l'utilisateur.

Objectifs de la tâche

1. Créer une animation pour l'en-tête de la page.
2. Animer une image qui apparaît après un certain temps.
3. Animer des boutons qui changent de couleur au survol.
4. Créer une animation pour une section de texte qui se déplace de haut en bas.
5. Créer une animation pour les éléments d'une liste qui apparaissent les uns après les autres.

Étape 1 : structure HTML

Tout d'abord, crée un fichier HTML avec la structure suivante :

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>Animations CSS</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <header class="main-header">
11    <h1>Bienvenue dans le monde des animations CSS</h1>
12  </header>
13  <section class="image-section">
14    <img src="image.jpg" alt="Belle vue" class="animated-image">
15  </section>
16  <section class="buttons-section">
17    <button class="animated-button">Bouton 1</button>
18    <button class="animated-button">Bouton 2</button>
19    <button class="animated-button">Bouton 3</button>
20  </section>
21  <section class="text-section">
22    <p class="animated-text">Voici un exemple de texte qui se déplacera de haut en bas.</p>
23  </section>
24  <section class="list-section">
25    <ul>
26      <li class="animated-list-item">Élément de liste 1</li>
27      <li class="animated-list-item">Élément de liste 2</li>
28      <li class="animated-list-item">Élément de liste 3</li>
29    </ul>
30  </section>
31</body>
32</html>

Étape 2 : styles CSS

Maintenant, crée un fichier CSS et ajoute les styles et animations suivants :

1/* Styles de base */
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/* Définitions des animations */
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}

Étape 3 : test

Ouvre le fichier HTML dans un navigateur pour voir les effets d'animation. Assure-toi que toutes les animations fonctionnent comme prévu.

Tâche

1. Animation de l'en-tête : ajoute à l'en-tête de la page (.main-header) une animation qui change la couleur de fond toutes les 5 secondes, en utilisant @keyframes et animation.
2. Animation de l'image : crée une animation pour l'image (.animated-image) qui apparaît avec un effet de glissement vers la gauche, avec un délai de 2 secondes.
3. Animation des boutons : modifie les boutons (.animated-button) pour qu'au clic ils s'animent en changeant de couleur vers le rouge et en augmentant la taille de police.
4. Animation du texte : ajoute une autre animation au texte (.animated-text) qui change sa couleur toutes les 3 secondes.
5. Animation de la liste : ajoute aux éléments de la liste (.animated-list-item) une animation qui fait apparaître les éléments avec un effet de glissement vers le haut et de rotation.

Utilise toutes les techniques présentées pour ajouter des effets d'animation avancés à la page web.

Récapitulatif des propriétés apprises

Dans ce module, tu as appris les propriétés d'animation CSS suivantes :

• @keyframes - définir les étapes de l'animation (comme les scènes successives de l'histoire du voyage de Râ)
• animation-name - attribuer une animation à un élément
• animation-duration - durée d'un cycle d'animation
• animation-timing-function - contrôle du rythme (linear, ease, ease-in, ease-out, cubic-bezier)
• animation-delay - délai avant le démarrage de l'animation
• animation-iteration-count - nombre de répétitions (valeur numérique ou infinite)
• animation-direction - sens de l'animation (normal, reverse, alternate, alternate-reverse)
• animation-fill-mode - état de l'élément avant et après l'animation (forwards, backwards, both)
• notation raccourcie animation - toutes les propriétés sur une seule ligne

Chacune de ces propriétés est comme un attribut différent du rituel d'un prêtre - ensemble, elles créent une cérémonie d'animation complète et magique !

Mets tes compétences à l'épreuve dans l'éditeur ci-dessous :

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  /* Ajoute l'animation bloom ici */
42  /* animation: bloom 5s ease-in-out infinite; */
43}
44
45/* Définis @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}