Cours HTML et CSS · Module 6: Animations CSS
Animation CSS : la barque solaire du pharaon
Dans cette leçon4
Dans l'Égypte ancienne, la barque solaire symbolisait le voyage du dieu soleil Râ à travers le ciel. Imaginons que nous voulions animer une telle barque qui traverse l'écran, mais qu'elle ne doive prendre le large qu'une fois que les prêtres ont terminé leur hymne, c'est-à-dire quelques secondes après le chargement de la page. Une animation qui démarre tout de suite gâcherait la cérémonie. Pour ce genre de situation, CSS dispose de la propriété animation-delay.
Étape 1 : définir les @keyframes
Tout d'abord, nous allons définir une animation qui déplace la barque horizontalement. L'étape 0% est le point de départ, et 100% la fin de la traversée :
1@keyframes sail {
2 0% { left: 0; }
3 100% { left: 100%; }
4}La propriété left ne fonctionne que sur les éléments positionnés, c'est pourquoi la barque recevra dans un instant position: absolute. La valeur left: 100% déplace son bord gauche jusqu'au bord droit du conteneur, autrement dit la barque s'éloigne au-delà de l'horizon.
Étape 2 : appliquer l'animation avec animation-delay
Maintenant, nous allons appliquer cette animation à l'élément représentant la barque, en ajoutant un délai de 3 secondes :
1.solar-barge {
2 position: absolute;
3 animation: sail 10s linear infinite;
4 animation-delay: 3s; /* délai de 3 secondes */
5}L'élément portant la classe solar-barge sera désormais animé avec un délai de 3 secondes, ce qui signifie qu'il restera immobile pendant les 3 premières secondes, puis commencera à se déplacer selon les @keyframes définis. La valeur linear donne une vitesse constante, sans accélération ni freinage, et infinite répète la traversée sans fin. L'ordre des déclarations compte ici : le raccourci animation remet le délai à 0, donc animation-delay doit venir après lui, sinon le raccourci l'écraserait.
Le délai dans le raccourci
Tu peux écrire la même chose en une seule déclaration. Dans le raccourci animation, la première valeur de temps est toujours la durée, et la seconde le délai :
1.solar-barge {
2 position: absolute;
3 animation: sail 10s linear 3s infinite;
4}L'effet est identique à celui de l'étape 2, et le code est plus court. Par exemple, animation: slide 2s ease 0.5s infinite fonctionne de la même façon : deux secondes de mouvement et une demi-seconde d'attente avant le départ.
Ce qui se passe pendant le délai
Le délai n'agit qu'une seule fois, avant le premier cycle. Avec infinite, les traversées suivantes démarrent aussitôt, sans nouvelle attente. Pendant le délai, la barque garde ses styles habituels, et non ceux de l'étape 0%, elle peut donc se trouver ailleurs qu'au point de départ de l'animation. animation-fill-mode: backwards règle ce problème, et tu le découvriras avec les raccourcis d'animation. Le délai peut aussi être négatif : -5s sur une traversée de dix secondes fait partir la barque immédiatement, à mi-chemin.
Une flotte de barques
Le délai montre toute sa puissance avec plusieurs éléments. Trois barques avec la même animation et des délais de 0s, 1s et 2s prendront le large l'une après l'autre, comme une flotte en procession, alors qu'elles utilisent toutes les mêmes @keyframes. Tu n'as pas besoin de trois animations : une seule et trois délais différents suffisent.
HTML pour la barque
Ton HTML pourrait ressembler à ceci pour représenter la barque. N'oublie pas la description dans l'attribut alt :
1<div class="solar-barge">
2 <img src="solar-barge.png" alt="Barque solaire du pharaon">
3</div>Le conteneur de la barque porte l'image, donc l'animation déplace les deux à la fois, et le fichier image lui-même ne change pas.
Récapitulatif
La propriété animation-delay en CSS est un outil utile pour ajouter un délai aux animations, ce qui permet de créer des effets plus complexes et sophistiqués. L'exemple de la barque solaire du pharaon montre comment cette technique peut être utilisée pour créer des animations intéressantes et thématiques. Toute animation construite avec @keyframes fonctionne de la même façon, par exemple un hiéroglyphe qui tourne de rotate(0deg) à rotate(360deg) avec animation: spin 3s linear infinite. Mon conseil : pour déplacer des éléments, choisis transform: translateX() plutôt que left, car le navigateur n'a alors pas besoin de recalculer la mise en page à chaque image. Dans le projet principal, les délais serviront à construire une séquence où les cartes apparaissent l'une après l'autre.
Dans l'éditeur ci-dessous t'attend une démonstration d'animations avancées. Concentre-toi sur deux sections : dans Animation Shorthand, le délai se trouve dans le raccourci, et dans Chained Animations, les phases successives démarrent grâce à animation-delay.
Code de cette leçon : index.html
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 avancées</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <h1>Animations CSS avancées</h1>
12
13 <section class="demo-section">
14 <h2>Propriété raccourcie animation (shorthand)</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 (mode de remplissage)</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">Cliquez n'importe où pour relancer les animations</p>
37 </section>
38
39 <section class="demo-section">
40 <h2>Animation Play State (état de lecture)</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 (survolez pour lancer)</span>
47 </div>
48 </div>
49 </section>
50
51 <section class="demo-section">
52 <h2>Animations enchaînées (séquentielles)</h2>
53 <div class="chain-demo">
54 <div class="chain-element phase1">Phase 1</div>
55 <div class="chain-element phase2">Phase 2</div>
56 <div class="chain-element phase3">Phase 3</div>
57 <div class="chain-element phase4">Phase 4</div>
58 </div>
59 </section>
60
61 <section class="demo-section">
62 <h2>Animations multiples (en parallèle)</h2>
63 <div class="multiple-demo">
64 <div class="multi-box">
65 <span>Rotation + Rebond + Couleur</span>
66 </div>
67 </div>
68 </section>
69
70 <section class="demo-section">
71 <h2>Animations responsives</h2>
72 <div class="responsive-demo">
73 <div class="responsive-card">
74 <h3>Carte responsive</h3>
75 <p>L'animation s'adapte à la taille de l'écran</p>
76 </div>
77 </div>
78 </section>
79
80 <section class="demo-section">
81 <h2>Animations de chargement en CSS pur</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>Animations 3D</h2>
110 <div class="threed-demo">
111 <div class="cube-3d">
112 <div class="face front">Avant</div>
113 <div class="face back">Arrière</div>
114 <div class="face right">Droite</div>
115 <div class="face left">Gauche</div>
116 <div class="face top">Haut</div>
117 <div class="face bottom">Bas</div>
118 </div>
119
120 <div class="flipcard">
121 <div class="flipcard-inner">
122 <div class="flipcard-front">
123 <h4>Survolez-moi !</h4>
124 </div>
125 <div class="flipcard-back">
126 <h4>Verso !</h4>
127 </div>
128 </div>
129 </div>
130 </div>
131 </section>
132 </div>
133
134 <script>
135 // Relancer les animations au clic
136 document.addEventListener('click', function() {
137 const fillBoxes = document.querySelectorAll('.fill-box');
138 fillBoxes.forEach(box => {
139 box.style.animation = 'none';
140 box.offsetHeight; // déclenche un reflow
141 box.style.animation = null;
142 });
143 });
144 </script>
145</body>
146</html>Souviens-toi : animation-delay est le prêtre qui ne donne à la barque le signal du départ qu'une fois que la dernière note de l'hymne à Râ s'est éteinte.
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. À quoi sert la propriété animation-delay ?
Tâches pratiques dans le jeu
- Éditeur de code
Crée @keyframes spin : de rotate(0deg) à rotate(360deg). Applique à .hieroglyph : animation: spin 3s linear infinite. Le hiéroglyphe tournera en douceur comme une roue à aubes sur le Nil !
- Tri horizontal
Remets dans le bon ordre la déclaration animation avec délai