8.5 Animations CSS

Nous venons de voir que les transitions CSS ne sont qu’un moyen d’animer des propriétés CSS entre un état de départ et un état de fin.

Les transitions SO CSS sont un type d’animation spécifique, dans lesquelles :

• il n’y a que 2 états : début et fin
• l’animation ne se boucle pas
• les états intermédiaires ne sont contrôlés que par la fonction de temporisation – timing function

En clair, ce dont vous avez besoin si vous souhaitez :

• avoir le contrôle sur les états intermédiaires ?
• faire une boucle d’animation ?
• différentes animations sur le même élément ?
• animer une propriété spécifique à mi-parcours de l’animation ?
• simuler différentes fonctions de minutage pour différentes propriétés ?

Les animations CSS permettent tout cela, et plus encore.

Les animations CSS sont comme des mini films dont vous êtes le réalisateur et qui donne des instructions (règles CSS) à vos acteurs (éléments HTML) pour différentes scènes (images clés – keyframes).

Animation properties – Propriétés d’animation

Comme la propriété transition, l’animation est une propriété abrégée pour plusieurs autres :

• name : le nom de l’animation
• duration : combien de temps dure la transition
• timing-function : comment les états intermédiaires sont calculés
• delay : pour lancer l’animation après un certain temps
• iteration-count : combien de fois l’animation doit être effectuée
• direction : si l’animation doit être inversée ou non
• fill-mode : quels styles sont appliqués avant et après la fin de l’animation 

Exemple

Pour animer un bouton de chargement, vous pouvez écrire une animation donnant l’impression de rebonds – bouncing :

@keyframes bouncing { 0% { bottom: 0; box-shadow: 0 0 5px rgba (0,0,0,0.5 );} 100% { bottom: 50px; box-shadow: 0 50px 50px rgba (0,0,0,0.1 );} }

.loading-button { animation: bouncing 0.5s cubic-bezier (0.1,0.25,0.1,1 ) 0s infinite alternate both;}

Vous devez d’abord écrire l’animation de rebonds à l’aide d’images clés – keyframes et la nommer bouncing. Vous pouvez ensuite utiliser cette animation en l’appliquant à .loading-button.

J’ai utilisé la propriété animation abrégée et inclus toutes les options :

• name: bouncing (correspond au nom des images clés)
• duration: 0.5s (une demi-seconde)
• timing-function: cubic-bezier(0.1,0.25,0.1,1)
• delay: 0s (pas de délai)
• iteration-count: infinite (joue indéfiniment)
• direction: alternate (va et vient)
• fill-mode: both (les deux)

@keyframes

Avant d’appliquer des animations aux éléments HTML, vous devez écrire les animations à l’aide d’images clés. Fondamentalement, les images clés constituent chacune des étapes intermédiaires d’une animation. Ils sont définis à l’aide de pourcentages:

• 0% est la première étape de l’animation
• 50% est l’étape à mi-parcours de l’animation
• 100% est la dernière étape

Vous pouvez également utiliser les mots-clés from et to au lieu de 0% et 100% respectivement.

Vous pouvez définir autant d’images clés que vous le souhaitez, telles que 33%, 4% ou même 29.86%. En pratique, vous n’en écrirez que quelques-uns.

Chaque image clé est une règle CSS, ce qui signifie que vous pouvez écrire les propriétés CSS comme d’habitude.

Pour définir une animation, écrivez simplement le mot clé @keyframes suivi de son nom – name :

@keyframes around { 0% { left: 0; top: 0;} 25% { left: 240px; top: 0;} 50% { left: 240px; top: 140px;} 75% { left: 0; top: 140px;} 100% { left: 0; top: 0;} }
p { animation: around 4s linear infinite;}

Remarquez comment les débuts 0% et fin 100% ont les mêmes règles CSS. Cela garantit que l’animation se boucle parfaitement. Comme le nombre d’itérations est défini sur  infinite – infini, l’animation passera de 0% à 100%, puis reviendra à 0%, instantanément et indéfiniment.

animation-name – nom de l’animation

Le nom de l’animation est utilisé au moins deux fois :

• lors de l’écriture de l’animation à l’aide de @keyframes
• lors de l’utilisation de l’animation à l’aide de la propriété animation-name (ou avec l’usage abrégé de animation)

@keyframes whatever{ /* ... */ }

.selector{ animation-name: whatever;}

Comme les noms de classe CSS, les noms d’animation peuvent uniquement inclure :

• lettres (a-z)
• nombres (0-9)
• traits de soulignement – underscores (_)
• tirets (-)

Il ne peut pas commencer par un chiffre ou deux tirets.

animation-duration – durée d’animation

Tout comme les durées de transition, les durées d’animation peuvent être définies en secondes  1s ou millisecondes 200ms.

.selector{ animation-duration: 0.5s;}

La valeur par défaut est 0s, ce qui signifie aucune animation.

animation-timing-function – Fonction de minutage d’une animation

Tout comme les fonctions de minutage de transition, les fonctions de minutage d’animation peuvent utiliser des mots clés – keywords tels que linear, ease-out, ou être définies à l’aide de fonctions personnalisées de cubic bezier.

.selector{ animation-timing-function: ease-in-out;}

Par défaut, ease.

Les animations CSS utilisant des images clés, vous pouvez définir une fonction de minutage linéaire – linear et simuler une courbe de Bézier cubique spécifique en définissant un grand nombre d’images clés très spécifiques. Découvrez Bounce.js pour générer des animations avancées.

animation-delay – délai d’animation

Tout comme les délais de transition, les délais d’animation peuvent être définis en secondes 1s ou millisecondes 200ms.

La valeur par défaut est 0s, ce qui signifie aucun retard/délai.

C’est utile pour déclencher plusieurs animations en séquence.

.a, .b, .c { animation: bouncing 1s;}
.b { animation-delay: 0.25s;}
.c { animation-delay: 0.5s;}

animation-iteration-count – nombre d’itérations (répétitions) d’animation

Par défaut, les animations ne sont lues qu’une fois (valeur de 1). Vous pouvez définir 3 types de valeurs:

• des nombres entiers comme 2 ou 3
• non-entiers comme 0.5 qui ne jouera que la moitié de l’animation
• le mot clé infinite qui répétera l’animation indéfiniment

.selector{ animation-duration: infinite;}

animation-direction – direction de l’animation

La direction de l’animation définit l’ordre dans lequel les images clés sont lues.

• normal : commence à 0%, se termine à 100%, recommence à 0%
• reverse : commence à 100%, se termine à 0%, recommence à 100%
• alternate : commence à 0%, va à 100%, va à 0%
• alternate-reverse : commence à100%, va à 0%, va à 100%

Il est plus facile de visualiser si le nombre d’itérations/répétitions de l’animation est défini sur infinite.

animation-fill-mode – mode de remplissage d’animation

Le mode de remplissage d’une animation définit ce qui se passe avant et après la fin de l’animation.

Lorsque vous définissez des images clés, vous définissez des règles CSS à appliquer à différentes étapes de l’animation. Désormais, ces règles CSS peuvent entrer en conflit avec celles déjà appliquées sur les éléments en cours d’animation.

Le mode de remplissage permet de dire au navigateur si les styles de l’animation doivent également être appliqués en dehors de l’animation.

Imaginons un bouton qui soit :

• rouge par défaut
• vire au bleu au début de l’animation
• se termine en vert lorsque l’animation est terminée