Animation

@keyframes

Les keyframes indiquent les étapes constituant une animation.

Dans son expression la plus simple, il est possible de spécifier un état de départ from (0%) et un état de fin to (100%).

@keyframes anim { from { transform: translateX(0%) } to { transform: translateX(400%) } }

Une interpolation sera effectuée entre ces deux états.

Pour une animation plus élaborée, il est possible de spécifier plusieurs états avec des pourcentages.

@keyframes anim { 0%, 100% { transform: translate(0%, 0%) } 25% { transform: translate(400%, 0%) } 50% { transform: translate(400%, 200%) } 75% { transform: translate(0%, 200%) } } À gauche, @keyframes utilisant un from et un to.
À droite, @keyframes utilisant des pourcentages. @keyframes @keyframes animation-name

Permet d'attribuer une animation à partir de son nom de référence en indiquant quel @keyframes appliquer à quel élément.

Par exemple, pour que l'élément avec la classe .element ait l'animation intitulée anim, il est possible de faire:

.element { animation-name: anim; } animation-name animation-name animation-duration

Définis la durée d'une animation. Ce nombre peut-être en seconde ou en milliseconde. 1s = 1000ms.

Par exemple, nous avons trois fois la même animation animation-name: left-to-right, mais à des durées différentes:

1 seconde
2 secondes
3 secondes

animation-duration animation-duration animation-timing-function

Dicte à l'animation son rythme. Par exemple, dans l'animation précédente on remarque que chaque carré accélère progressivement avant de ralentir ensuite. Ce rythme est appelé ease et est celui par défaut des animations.

L'exemple suivant contient six fois la même animation, mais avec des rythmes différents.

linear vitesse constante, n'accélère ou ne ralentis jamais ↗️
ease accélère progressivement et ralentis en fin de parcours (Comportement par défaut)
ease-in-out commence lentement et ralentis en fin de parcours.
ease-in commence lentement ⤴️
ease-out ralentis en fin de parcours ⤵️
cubic-bezier Rythme personnalisable via une courbe de Bézier.

animation-timing-function animation-timing-function

OUTIL Cubic-Bezier.com Outil développé par Lea Verou permettant de créer et de visualiser facilement des courbes de bézier.

animation-iteration-count

Indique le nombre de fois qu'une animation doit être jouée (par défaut 1). Ce nombre peut-être compris entre 0 et ∞ et accepte les fractions. Il est aussi possible de spécifier infinite pour qu'elle joue à l'infini.

Par exemple:

Joue 1x
Joue 2x
Joue à l'infinie ♾️

animation-iteration-count animation-iteration-count

EXERCICE Animation - Fantôme Pour cet exercice nous allons animer le déplacement d’un fantôme 👻.

animation-delay

Définis le délai d'attente avant de démarrer une animation. Par défaut, cette propriété est à 0s. Si une valeur négative est attribuée, l'animation débutera déjà commencé, comme-ci l'équivalent de la valeur s'était déjà écoulée.

Par exemple:

Aucun délai
Délais de 0.5s
Délais d'une seconde

Le délai n’est effectif qu’au démarrage d’une animation. Si celle-ci joue plus d’une fois, le délai ne sera pas effectif à chaque itération. animation-delay animation-delay animation-direction

Indique la direction dans laquelle une animation doit-être joué.

Valeurs possibles:

normal du début vers la fin (par défaut)
reverse de la fin vers le début
alternate alterne entre normal et reverse à chaque itération de l'animation.
alternate-reverse alterne entre reverse et normal à chaque itération de l'animation.

Par exemple: