Cours HTML et CSS · Module 6: Animations CSS
animation-direction
Dans cette leçon4
Dans la mythologie égyptienne, le dieu Râ voyageait chaque jour dans sa barque solaire à travers le ciel d'est en ouest (normal), et la nuit il revenait sous terre d'ouest en est (reverse). Le cycle complet du jour et de la nuit est un exemple parfait de mouvement alterné (alternate) - d'abord dans un sens, puis dans l'autre.
La propriété animation-direction en CSS te permet d'indiquer dans quel sens une animation doit être jouée. Grâce à cette propriété, nous pouvons créer des animations qui se déplacent en avant, en arrière ou en alternance.
Exemples d'utilisation de animation-direction
Normal
L'animation est jouée du début à la fin (par défaut).
1.animation-normal {
2 animation-direction: normal;
3}Reverse
L'animation est jouée de la fin au début.
1.animation-reverse {
2 animation-direction: reverse;
3}Alternate
L'animation est jouée en alternance : du début à la fin, puis de la fin au début.
1.animation-alternate {
2 animation-direction: alternate;
3}Alternate-Reverse
L'animation est jouée en alternance, mais commence de la fin au début, puis du début à la fin.
1.animation-alternate-reverse {
2 animation-direction: alternate-reverse;
3}Exemple : aller et retour
Nous voulons qu'un élément se déplace puis revienne à sa place.
CSS
1@keyframes slide {
2 0%, 100% { left: 0; }
3 50% { left: 100px; }
4}
5
6.slide-forward-backward {
7 position: absolute;
8 animation: slide 2s ease-in-out;
9 animation-iteration-count: 2; /* Deux cycles */
10 animation-direction: alternate; /* Sens alterné */
11}Dans ce cas, l'élément se déplacera d'abord de 100 pixels vers la droite, puis reviendra à sa place. Grâce à animation-direction: alternate, le sens de l'animation change à chaque cycle.
HTML pour l'exemple
Pour tester cette animation, crée un fichier HTML et ajoute un élément avec une classe attribuée :
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 <style>
8 @keyframes slide {
9 0%, 100% { left: 0; }
10 50% { left: 100px; }
11 }
12
13 .slide-forward-backward {
14 position: relative;
15 animation: slide 2s ease-in-out;
16 animation-iteration-count: 2;
17 animation-direction: alternate;
18 width: 50px;
19 height: 50px;
20 background-color: lightcoral;
21 margin: 20px;
22 }
23 </style>
24</head>
25<body>
26 <div class="slide-forward-backward">Slide</div>
27</body>
28</html>Tâche : créer une animation utilisant différents sens
Ta tâche consiste à créer une animation pour trois éléments différents. Chaque élément doit utiliser une valeur animation-direction différente :
- Normal : l'élément doit se déplacer dans un seul sens, du début à la fin.
- Reverse : l'élément doit se déplacer de la fin au début.
- Alternate : l'élément doit se déplacer en alternance dans les deux sens.
Étapes à réaliser :
- Crée un fichier HTML et ajoute trois éléments qui seront animés.
- Définis des
@keyframespour une animation qui déplace les éléments horizontalement. - Applique les propriétés
animation-directionappropriées à chaque élément. - Ajoute les styles dans un fichier CSS et charge-le dans le fichier HTML.
Exemple :
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 <style>
8 @keyframes slide {
9 0%, 100% { left: 0; }
10 50% { left: 100px; }
11 }
12
13 .animation-container {
14 position: relative;
15 width: 100px;
16 height: 50px;
17 margin: 20px;
18 background-color: lightblue;
19 }
20
21 .normal-animation {
22 animation: slide 2s linear infinite;
23 animation-direction: normal;
24 }
25
26 .reverse-animation {
27 animation: slide 2s linear infinite;
28 animation-direction: reverse;
29 }
30
31 .alternate-animation {
32 animation: slide 2s linear infinite;
33 animation-direction: alternate;
34 }
35 </style>
36</head>
37<body>
38 <div class="animation-container normal-animation">Normal</div>
39 <div class="animation-container reverse-animation">Reverse</div>
40 <div class="animation-container alternate-animation">Alternate</div>
41</body>
42</html>Grâce à la propriété animation-direction, tu as un contrôle total sur le sens de l'animation, ce qui te permet de créer des effets visuels plus avancés et intéressants sur les pages web.
Souviens-toi : animation-direction est comme l'ordre du pharaon à la barque solaire - tu peux lui ordonner de naviguer en avant, en arrière ou en alternance, créant ainsi un cycle complet de mouvement !
Essaie différents sens d'animation dans l'éditeur ci-dessous :
Code de cette leçon : style.css
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(135deg, #8d6e2e, #c9a84c);
10 min-height: 100vh;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 color: #3d2914;
15}
16
17.scene {
18 text-align: center;
19 padding: 20px;
20}
21
22h2 {
23 margin-bottom: 30px;
24 color: #3d2914;
25}
26
27.scroll-container {
28 display: flex;
29 justify-content: center;
30 margin: 20px 0;
31}
32
33.papyrus {
34 width: 300px;
35 background: linear-gradient(180deg, #f5deb3, #deb887, #d2b48c);
36 border-radius: 8px;
37 padding: 25px;
38 border: 3px solid #8d6e2e;
39 cursor: pointer;
40 overflow: hidden;
41 transform-origin: left center;
42 /* Ajoute la transition ici */
43 /* transition: transform 0.6s ease-in-out, box-shadow 0.6s ease; */
44 transform: scaleX(0.3);
45}
46
47/* Ajoute l'effet :hover pour .papyrus */
48/* .papyrus:hover { */
49/* transform: scaleX(1); */
50/* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); */
51/* } */
52
53.papyrus-content {
54 font-family: serif;
55 font-size: 16px;
56 line-height: 1.8;
57 color: #3d2914;
58}
59
60.hint {
61 margin-top: 30px;
62 color: #5a3d1a;
63 font-style: italic;
64}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. Que fait animation-direction: reverse ?
2. Quelle valeur d'animation-direction fait jouer l'animation en aller-retour : d'abord vers l'avant, puis vers l'arrière ?
Voici 2 des 3 questions de cette leçon. Réponds aux autres dans le jeu.
Tâches pratiques dans le jeu
- Clique dans l'ordre
Remets dans le bon ordre la déclaration CSS qui définit la direction de l'animation :