Les animations CSS avec @keyframes

Les animations CSS offrent la possibilité d'ajouter du mouvement et de l'interaction aux pages web sans avoir besoin d'utiliser JavaScript. Grâce à la règle @keyframes, nous pouvons définir des animations qui progressent à travers différentes étapes, en gardant un contrôle total sur la façon dont les éléments se déplacent, changent d'échelle, tournent, et bien plus encore.

Définir des animations avec @keyframes

L'utilisation de @keyframes te permet de créer une animation nommée composée de différentes étapes, exprimées en pourcentages de 0 % à 100 %.

Exemple :

1@keyframes slide {
2  0% { left: 0; }
3  50% { left: 50px; }
4  100% { left: 100px; }
5}

Dans cet exemple, l'animation nommée « slide » déplace un élément horizontalement de sa position de départ jusqu'à 100 pixels vers la droite.

Appliquer des animations aux éléments

Après avoir défini une animation avec @keyframes, tu peux l'appliquer à n'importe quel élément à l'aide de la propriété animation.

Exemple :

1div {
2  animation: slide 2s linear infinite;
3}

Dans cet exemple :

• slide : le nom de l'animation défini avec @keyframes.
• 2s : la durée de l'animation.
• linear : la transition entre les étapes (ici, la transition est régulière).
• infinite : l'animation se répétera indéfiniment.

Techniques avancées

Définir des points de contrôle

Tu peux définir autant de points de contrôle que tu veux dans une animation, pas seulement le début, le milieu et la fin.

Exemple :

1@keyframes bounce {
2  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
3  40% { transform: translateY(-30px); }
4  60% { transform: translateY(-15px); }
5}

Animer plusieurs propriétés

À chaque étape de l'animation, tu peux manipuler plusieurs propriétés CSS à la fois.

Exemple :

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}

Les animations CSS avec @keyframes offrent un outil puissant pour créer des animations fluides et réactives sans avoir besoin de scripts. Grâce au large éventail d'options de personnalisation et de contrôle, elles constituent une solution idéale pour les développeurs et les designers qui veulent ajouter de la vie et de l'interaction à leurs sites web.

Animation CSS avec animation-delay : un exemple sur le thème de l'Égypte ancienne

Parfois, nous voulons qu'une animation ne démarre pas immédiatement, mais avec un certain délai. La propriété animation-delay en CSS te permet de définir un tel délai. Pour illustrer cette fonctionnalité, nous allons créer une animation qui évoque des images de l'Égypte ancienne.

Tâche : créer une animation sur l'Égypte ancienne

Objectif

Créer trois animations inspirées de l'Égypte ancienne qui utiliseront différentes propriétés CSS, notamment @keyframes, animation et animation-delay.

Étapes à réaliser :

1. Structure HTML

Crée un nouveau fichier HTML avec une structure de document de base. Ajoute trois éléments div qui représenteront une pyramide, un scarabée et l'Œil d'Horus.

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>Animation égyptienne</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. Styles et animations en CSS

Ajoute le style et les animations dans le fichier styles.css. Assure-toi que le fichier CSS est correctement lié au fichier 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/* Animation pour la pyramide */
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/* Animation pour le scarabée */
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/* Animation pour l'Œil d'Horus */
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. Définir le délai de l'animation

Ajoute la propriété animation-delay pour que les animations démarrent avec un délai.

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}

Récapitulatif

Tu as créé trois animations différentes inspirées de l'Égypte ancienne, en utilisant les propriétés @keyframes, animation et animation-delay en CSS. Analyse le fonctionnement de chacune de ces animations et la façon dont elles peuvent être adaptées à différents besoins de conception.

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>CSS @keyframes - Les bases de l'animation</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>CSS @keyframes - Les animations en CSS</h1>
12
13        <section class="demo-section">
14            <h2>@keyframes de base</h2>
15            <div class="animation-demo">
16                <div class="box slide">
17                    <span>Animation Slide</span>
18                </div>
19                <div class="box bounce">
20                    <span>Animation Bounce</span>
21                </div>
22                <div class="box grow-spin">
23                    <span>Agrandir et tourner</span>
24                </div>
25            </div>
26        </section>
27
28        <section class="demo-section">
29            <h2>Animation Delay (délai)</h2>
30            <div class="delay-demo">
31                <div class="pyramid">Pyramide</div>
32                <div class="scarab">Scarabée</div>
33                <div class="eye">Œil d'Horus</div>
34            </div>
35            <p class="help-text">Les animations démarrent avec des délais différents</p>
36        </section>
37
38        <section class="demo-section">
39            <h2>Animation Direction (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 (fonctions de cadence)</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 (nombre de répétitions)</h2>
62            <div class="iteration-demo">
63                <div class="iter-box once">1 fois</div>
64                <div class="iter-box three-times">3 fois</div>
65                <div class="iter-box infinite">Infini</div>
66            </div>
67        </section>
68
69        <section class="demo-section">
70            <h2>Animations complexes multi-propriétés</h2>
71            <div class="complex-demo">
72                <div class="complex-box rainbow">
73                    <span>Transformation arc-en-ciel</span>
74                </div>
75                <div class="complex-box floating">
76                    <span>Élément flottant</span>
77                </div>
78                <div class="complex-box pulsing">
79                    <span>Cœur qui bat</span>
80                </div>
81            </div>
82        </section>
83
84        <section class="demo-section">
85            <h2>Animations égyptiennes - Démo thématique</h2>
86            <div class="egyptian-demo">
87                <div class="solar-barge">Barque solaire</div>
88                <div class="hieroglyph">𓂀</div>
89                <div class="sphinx">Sphinx</div>
90            </div>
91        </section>
92    </div>
93</body>
94</html>