Animations CSS avancées avec @keyframes

Dans l'Égypte ancienne, les prêtres qui accomplissaient des rituels les répétaient un nombre précis de fois - parfois trois fois, parfois sept fois, et parfois une infinité de fois pour assurer la protection divine. De la même manière en CSS, les animations peuvent être contrôlées à l'aide de différentes propriétés, notamment animation-iteration-count, qui indique combien de fois une animation doit se répéter, et animation-direction, qui indique le sens de l'animation. Ci-dessous, nous présentons plusieurs exemples pratiques utilisant ces propriétés.

Imagine que tu crées une animation représentant la barque solaire de Râ traversant le ciel. La barque doit répéter son trajet chaque jour - le matin elle part de l'est, le soir elle atteint l'ouest, puis elle retourne sous terre pour pouvoir réapparaître au matin. C'est une analogie parfaite pour les propriétés que nous allons apprendre aujourd'hui.

animation-iteration-count

La propriété animation-iteration-count te permet d'indiquer combien de fois une animation doit se répéter.

Exemple 1 : balle qui rebondit

Nous voulons que la balle rebondisse 3 fois.

CSS

1@keyframes bounce {
2  0%, 100% { transform: translateY(0); }
3  50% { transform: translateY(-30px); }
4}
5
6.bouncing-ball {
7  animation: bounce 1s ease-in-out;
8  animation-iteration-count: 3; /* La balle rebondira 3 fois */
9}

Exemple 2 : rotation infinie

Nous voulons qu'un élément tourne à l'infini.

CSS

1@keyframes spin {
2  0% { transform: rotate(0deg); }
3  100% { transform: rotate(360deg); }
4}
5
6.infinite-spin {
7  animation: spin 2s linear infinite;
8  animation-iteration-count: infinite; /* Rotation infinie */
9}

animation-direction

La propriété animation-direction indique le sens de l'animation. Tu peux définir différentes valeurs pour obtenir différents effets :

• normal (par défaut) - animation du début à la fin.
• reverse - animation de la fin au début.
• alternate - l'animation alterne du début à la fin, puis de la fin au début.
• alternate-reverse - l'animation alterne de la fin au début, puis du début à la fin.

Exemple 3 : clignotement alterné

Nous voulons qu'un élément change de couleur en alternance.

CSS

1@keyframes blink {
2  0%, 100% { background-color: red; }
3  50% { background-color: blue; }
4}
5
6.alternate-blink {
7  animation: blink 1s linear infinite;
8  animation-direction: alternate; /* Change le sens de l'animation */
9}

Techniques avancées

Combiner des propriétés

Nous pouvons combiner différentes propriétés d'animation pour créer des effets plus complexes.

Exemple 4 : balle qui rebondit et tourne

Nous voulons que la balle rebondisse et tourne en même temps, en alternant du début à la fin puis de la fin au début.

CSS

1@keyframes bounce-spin {
2  0%, 100% { transform: translateY(0) rotate(0deg); }
3  50% { transform: translateY(-30px) rotate(180deg); }
4}
5
6.bouncing-spinning-ball {
7  animation: bounce-spin 2s ease-in-out infinite;
8  animation-direction: alternate; /* Rebond et rotation en alternance */
9}

HTML pour les exemples

Pour tester ces animations, crée un fichier HTML et ajoute les éléments appropriés avec les classes attribuées :

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  <div class="bouncing-ball">Balle qui rebondit</div>
11  <div class="infinite-spin">Rotation infinie</div>
12  <div class="alternate-blink">Éléments clignotants</div>
13  <div class="bouncing-spinning-ball">Balle qui rebondit et tourne</div>
14</body>
15</html>

Récapitulatif

Les propriétés animation-iteration-count et animation-direction en CSS permettent de créer des animations avancées qui peuvent être répétées plusieurs fois et changer de sens. Associées à @keyframes, ces propriétés offrent un contrôle total sur l'apparence et le comportement des éléments de la page, ouvrant la porte à la création de designs plus interactifs et visuellement attrayants.

« Comme dit Mohamed : chaque animation, tel un rituel de pharaon, a son rythme et son sens. Maîtrise-les, et tes pages prendront vie comme les peintures du temple de Karnak ! »

Essaie ces propriétés 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, #ff9a56, #d4763a);
10  color: white;
11  min-height: 100vh;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #3d2914;
25}
26
27.desert {
28  position: relative;
29  width: 300px;
30  height: 250px;
31  margin: 0 auto;
32}
33
34.pyramid {
35  font-size: 120px;
36  color: #c9a84c;
37  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
38  position: absolute;
39  top: 20px;
40  left: 50%;
41  transform: translateX(-50%);
42  /* Ajoute l'animation ici */
43  /* Utilise @keyframes appear avec opacity et scale */
44  /* animation: appear 3s ease-out forwards; */
45}
46
47.sand {
48  position: absolute;
49  bottom: 0;
50  width: 100%;
51  height: 60px;
52  background: linear-gradient(180deg, #d4a574, #c9a84c);
53  border-radius: 50% 50% 0 0;
54}
55
56/* Définis @keyframes appear */
57/* 0% { opacity: 0; transform: translateX(-50%) scale(0.3); } */
58/* 100% { opacity: 1; transform: translateX(-50%) scale(1); } */
59
60.hint {
61  margin-top: 20px;
62  color: #3d2914;
63  font-style: italic;
64}