animation-direction |
Direction de l'animation |
|---|---|
| CSS3 |
Syntaxe
| animation-direction: alternate|alternate-reverse|initial|inherit|normal|reverse; |
Paramètres
| Paramètre | Description |
|---|---|
| alternate | Ce paramètre permet d'indiquer qu'il doit être en alternance en direction normal lorsque son mouvement en impaire (1, 3, 5, 7, 9,...) et en direction inversé lorsqu'elle est paire (2, 4, 6, 8, 10,...). |
| alternate-reverse | Ce paramètre permet d'indiquer qu'il doit être en alternance en direction normal lorsque son mouvement en paire (2, 4, 6, 8, 10,...) et en direction inversé lorsqu'elle est impaire (1, 3, 5, 7, 9,...). |
| inherit | Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| normal | Ce paramètre permet d'indiquer que l'animation doit être joué de façon normal. C'est la valeur par défaut. |
| reverse | Ce paramètre permet d'indiquer que l'animation doit être joué en direction inversé. |
Description
Cette propriété permet d'indiquer la direction et le cycle de l'animation.
Remarques
- Contrôle de la direction de l'animation : La propriété animation-direction permet de définir dans quel sens une animation doit s'exécuter. En définissant une direction différente, comme normal ou reverse, vous pouvez modifier le sens dans lequel les étapes définies par @keyframes sont lues, ce qui offre une grande flexibilité pour les animations.
- Valeur normal par défaut : Par défaut, la valeur de animation-direction est normal, ce qui signifie que l'animation progresse dans l'ordre des étapes définies dans les règles @keyframes, c'est-à-dire de 0% à 100%. Cela correspond au comportement standard attendu des animations.
- Sens inverse avec reverse : En utilisant la valeur reverse, l'animation se déroule dans le sens inverse des étapes définies, c'est-à-dire de 100% à 0%. Cela peut être utile pour réutiliser une animation existante sans avoir à écrire un nouveau bloc @keyframes.
- Effets alternatifs avec alternate : La valeur alternate permet à l'animation de s'exécuter dans le sens normal lors d'une itération, puis dans le sens inverse lors de l'itération suivante. Cela est particulièrement pratique pour créer des mouvements oscillatoires ou des effets qui "rebondissent" naturellement.
- Sens inverse alterné avec alternate-reverse : La valeur alternate-reverse est similaire à alternate, mais elle commence par une itération en sens inverse (de 100% à 0%), suivie d'une itération en sens normal (de 0% à 100%). Cela permet une variation supplémentaire dans la séquence des animations.
- Compatibilité avec animation-iteration-count : La propriété animation-direction fonctionne en tandem avec animation-iteration-count. Par exemple, avec alternate ou alternate-reverse, le nombre d'itérations déterminera combien de fois l'animation change de direction, ce qui peut être infini avec animation-iteration-count: infinite.
- Applications pratiques dans les interfaces : animation-direction est couramment utilisée pour des effets interactifs ou dynamiques, comme des indicateurs de chargement oscillants, des transitions fluides, ou des animations répétées devant varier entre aller-retour ou avancer dans un seul sens.
- Impact sur la créativité visuelle : En utilisant animation-direction avec des animations complexes, il est possible de réduire le besoin de créer plusieurs blocs @keyframes. Cela simplifie le code tout en augmentant les possibilités créatives pour les concepteurs d'interface.
Dernière mise à jour : Dimanche, le 20 décembre 2015