La notation raccourcie d'animation

Un seul mouvement de scarabée décrit avec des propriétés séparées, cela peut faire jusqu'à huit lignes : le nom, la durée, le rythme, le délai, les répétitions, le sens, le remplissage et l'état. Avec plusieurs animations, la feuille de style grossit comme une pile de rouleaux dans un scriptorium. En CSS, nous pouvons utiliser une notation raccourcie pour définir plusieurs propriétés d'animation à la fois. La notation raccourcie animation te permet de définir différents aspects d'une animation sur une seule ligne, ce qui rend le code plus concis et plus lisible.

La propriété animation

La propriété animation est un raccourci qui combine les propriétés suivantes :

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Syntaxe

Voici la syntaxe de la propriété animation, avec un exemple qui utilise ses huit parties à la fois :

1.animation-example {
2  animation: slide 3s ease-in 1s 2 alternate both paused;
3}

Ce raccourci peut être décomposé en ses différentes parties :

• slide : le nom de l'animation (correspond à animation-name).
• 3s : la durée de l'animation (correspond à animation-duration).
• ease-in : la fonction de timing de l'animation (correspond à animation-timing-function).
• 1s : le délai de l'animation (correspond à animation-delay).
• 2 : le nombre de répétitions de l'animation (correspond à animation-iteration-count).
• alternate : le sens de l'animation (correspond à animation-direction).
• both : le mode de remplissage de l'animation (correspond à animation-fill-mode).
• paused : l'état de lecture de l'animation (correspond à animation-play-state).

L'ordre des valeurs

Le navigateur reconnaît la plupart des valeurs à leur type, mais deux règles ne souffrent aucune exception. La première valeur de temps est toujours la durée, et la seconde le délai. Le nom de l'animation ne doit pas ressembler à un mot-clé, par exemple infinite, car le navigateur le traiterait comme ce mot-clé. Toutes les propriétés ne doivent pas obligatoirement être définies et tu peux en omettre certaines, mais celles que tu omets reprennent leurs valeurs par défaut. D'où un piège classique : animation: slide sans durée dure 0s et n'affiche rien. Mon conseil : écris toujours les valeurs dans l'ordre de la liste ci-dessus, comme dans l'écriture la plus courante, animation: pulse 2s ease-in-out infinite.

Le mode de remplissage

La partie both de l'exemple est le mode de remplissage, qui indique ce que l'élément affiche avant le début et après la fin de l'animation. La valeur par défaut none laisse les styles habituels, forwards fige l'élément sur la dernière étape, backwards affiche la première étape dès le délai, et both combine les deux comportements :

1@keyframes rise {
2  from { opacity: 0; transform: translateY(40px); }
3  to { opacity: 1; transform: translateY(0); }
4}
5
6.scarab {
7  animation: rise 2s ease-out 1s both;
8}

Pendant la première seconde, le scarabée est invisible et abaissé, car both agit comme backwards. Après deux secondes de mouvement, il reste sur l'étape to, car il agit aussi comme forwards. Avec la valeur none, il apparaîtrait brièvement avant le départ, puis reviendrait à ses styles habituels après la fin.

Une pause sans remise à zéro

La partie paused appartient à animation-play-state, qui permet de suspendre une animation. Dans l'exemple de syntaxe, l'animation démarre déjà en pause, mais le plus souvent, on déclenche la pause au survol du curseur :

1.scarab:hover {
2  animation-play-state: paused;
3}

L'animation se fige sur l'image en cours, et quand le curseur s'éloigne, elle reprend au même endroit au lieu de recommencer depuis le début.

Exemple

Voici un exemple plus détaillé de la notation raccourcie animation, cette fois accompagnée de sa règle @keyframes :

1@keyframes slide {
2  0% { transform: translateX(0); }
3  100% { transform: translateX(100px); }
4}
5
6.slide-element {
7  animation: slide 2s ease-in-out 0s infinite alternate;
8}

L'élément portant la classe slide-element se déplacera de 100 pixels vers la droite puis reviendra, à l'infini, avec un effet ease-in-out. Le délai 0s peut être omis, car c'est la valeur par défaut.

Plusieurs animations à la fois

Un même élément peut avoir plusieurs animations simultanément. Tu les sépares par des virgules, et chacune reçoit son propre jeu de valeurs :

1.eye-of-horus {
2  animation: fadeIn 2s ease, slide 1s linear;
3}

Les deux animations démarrent ensemble, chacune selon ses propres @keyframes et sa propre durée. Quand deux animations modifient la même propriété, par exemple transform, c'est celle qui figure le plus loin dans la liste qui l'emporte.

Quand l'animation ne démarre pas

Quand rien ne se passe, vérifie dans l'ordre : que la règle @keyframes existe, que le nom dans animation lui correspond à la lettre près, que la durée est supérieure à zéro et que l'élément est visible, car avec display: none l'animation ne fonctionne pas du tout. Pour finir, jette un œil au panneau des animations dans les outils de développement du navigateur.

La notation raccourcie d'animation en CSS te permet de définir plusieurs propriétés d'animation sur une seule ligne, ce qui facilite la gestion et la lecture du code. L'utilisation de la propriété animation peut accélérer considérablement le processus de création d'animations complexes tout en préservant la clarté du code. Dans les leçons suivantes, tu monteras plus haut sur l'échelle : des animations simples avec from et to, en passant par les étapes en pourcentages et plusieurs propriétés à la fois, jusqu'aux séquences avec délais et aux scènes 3D avec perspective.

Dans l'éditeur ci-dessous t'attend le ciel nocturne au-dessus des pyramides. Décommente, au niveau des étoiles, le raccourci animation: twinkle 1.5s ease-in-out infinite, définis @keyframes twinkle en suivant les indications des commentaires et donne à chaque étoile un délai différent.

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, #0a0a2e, #1a1a4e, #0d0d3a);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.night-sky {
18  text-align: center;
19  padding: 20px;
20  width: 100%;
21  max-width: 500px;
22}
23
24h2 {
25  margin-bottom: 30px;
26  color: #f0e68c;
27}
28
29.stars-container {
30  position: relative;
31  height: 200px;
32}
33
34.star {
35  position: absolute;
36  font-size: 24px;
37  color: #fffacd;
38  /* Ajoute l'animation twinkle à chaque étoile */
39  /* animation: twinkle 1.5s ease-in-out infinite; */
40}
41
42.star-1 { top: 20px; left: 10%; }
43.star-2 { top: 50px; left: 60%; }
44.star-3 { top: 10px; left: 40%; }
45.star-4 { top: 80px; left: 80%; }
46.star-5 { top: 60px; left: 25%; }
47
48/* Ajoute différents animation-delay pour chaque étoile */
49/* .star-1 { animation-delay: 0s; } */
50/* .star-2 { animation-delay: 0.3s; } */
51/* .star-3 { animation-delay: 0.6s; } */
52/* .star-4 { animation-delay: 0.9s; } */
53/* .star-5 { animation-delay: 1.2s; } */
54
55/* Définis @keyframes twinkle */
56/* 0%, 100% { opacity: 0.3; transform: scale(0.8); } */
57/* 50% { opacity: 1; transform: scale(1.2); } */
58
59.pyramids-silhouette {
60  font-size: 48px;
61  color: #2d1b4e;
62  letter-spacing: 20px;
63  margin-top: 20px;
64}
65
66.hint {
67  margin-top: 20px;
68  color: #aaa;
69  font-style: italic;
70}

Souviens-toi : le raccourci animation est le cartouche du pharaon, un seul cadre qui contient tout le nom, à condition que les signes y soient placés dans un ordre lisible.