Dans un de mes articles, vous avez vu comment réaliser des animations simples avec la propriété css transition, comme faire passer une propriété d’une valeur à une autre via la propriété de transitions CSS3. Toutefois, les transitions CSS3 offrent peu de contrôle sur la façon dont l’animation progresse dans le temps.
La propriété css animation vous permet quand à lui de créer des animations par images clés ( @keyframes en anglais ).
Création d'animations CSS3
Les animations CSS permets de faire des animations basées sur des keyframes qui vous permettent de spécifier les modifications des propriétés CSS dans le temps, comme les animations flash.
- La première étape de la création d’une animation CSS consiste à définir des images clés individuelles et à nommer une animation avec en déclarant des keyframes.
- La deuxième étape consiste à référencer les keyframes par leur nom à l’aide de la propriété animation-name, ainsi qu’à ajouter la propriété animation-duration et d’autres propriétés d’animation facultatives pour contrôler le comportement de l’animation.
Toutefois, il n’est pas nécessaire de définir l’ensemble des règles keyframes avant de la référencer ou de l’appliquer.
L’exemple suivant vous montre comment animer une <div> horizontalement d’une position à une autre en utilisant la propriété le css animation.
See the Pen [1] CSS3 Animation - gekkode.com by Damien Flandrin (@dam62500) on CodePen.dark
Vous devez spécifier au moins deux propriétés : animation-name et animation-duration (supérieure à 0), pour que l’animation se produise. Cependant, toutes les autres propriétés d’animation sont facultatives, car leurs valeurs par défaut n’empêchent pas une animation de se produire.
Remarque : toutes les propriétés CSS ne sont pas animables. En général, toute propriété CSS qui accepte des valeurs sous forme de nombres, de longueurs, de pourcentages ou de couleurs est animable.
Définition des images clés (keyframes)
Les images clés sont utilisées pour spécifier les valeurs des propriétés d’animation à différents stades de l’animation. Les images clés sont spécifiées à l’aide d’une règle de style CSS spécialisée – @keyframes. Le sélecteur d’image clé pour une règle de style d’image clé commence par un pourcentage (%) ou les mots clés from (à partir de 0 %) ou to (à partir de 100 %). Le sélecteur est utilisé pour spécifier l’endroit où une image clé est déclaré pendant la durée de l’animation.
Les pourcentages représentent un pourcentage de la durée de l’animation. 0 % représente le point de départ de l’animation, 100 % représente le point d’arrivée, 50 % représente le point médian et ainsi de suite. En d’autres termes, une image-clé de 50 % dans une animation de 2 secondes se trouve à 1 seconde de l’animation.
See the Pen [2] CSS3 Animation - gekkode.com by Damien Flandrin (@dam62500) on CodePen.dark
Propriété Animation en abrégé
Il existe de nombreuses propriétés à prendre en compte lors de la création des animations. Cependant, il est également possible de spécifier toutes les propriétés des animations dans une seule propriété afin de raccourcir le code.
La propriété animation est un raccourci permettant de définir toutes les propriétés d’animation individuelles en une seule fois, dans l’ordre indiqué. Par exemple :
See the Pen [3] CSS3 Animation - gekkode.com by Damien Flandrin (@dam62500) on CodePen.dark
Remarque : si une valeur est manquante ou non spécifiée, la valeur par défaut de cette propriété sera utilisée à la place. En d’autres termes, si la valeur de la propriété animation-duration est manquante, aucune transition ne se produira, car sa valeur par défaut est 0.
Propriétés d'animation CSS3
| Propriété | Description |
|---|---|
|
animation |
Une propriété raccourcie pour définir toutes les propriétés de l'animation en une seule déclaration. |
|
animation-name |
Spécifie le nom des animations définies par @keyframes qui doivent être appliquées à l'élément sélectionné. |
|
animation-duration |
Spécifie le nombre de secondes ou de millisecondes nécessaires à l'accomplissement d'un cycle de l'animation. |
|
animation-timing-function |
Spécifie la façon dont l'animation progressera pendant la durée de chaque cycle, c'est-à-dire les fonctions easing, ease-in, ease-out, .... |
|
animation-delay |
Spécifie quand l'animation commencera. |
|
animation-iteration-count |
Spécifie le nombre de fois qu'un cycle d'animation doit être joué avant de s'arrêter. |
|
animation-direction |
Indique si l'animation doit ou non être jouée en sens inverse sur des cycles alternés. |
|
animation-fill-mode |
Spécifie comment une animation CSS doit appliquer des styles à sa cible avant et après son exécution. |
|
animation-play-state |
Spécifie si l'animation est en cours ou en pause. |
|
@keyframes |
Spécifie les valeurs des propriétés d'animation à différents moments de l'animation. |
Conclusion
Vous devriez avoir les bases pour pouvoir réaliser des animations CSS3, vous pouvez également vous aidez avec des bibliothèques d’animations vous permettant de réaliser des animations plus facilement.
