CSS3 animation-directionPropriété

Exemple

Lancez d'abord l'animation une fois, puis lancez-la en sens inverse une fois :

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari et Chrome */

Les nombres dans le tableau indiquent la première version de navigateur qui prend entièrement en charge la propriété.

Les nombres suivis de -webkit-, -ms- ou -moz- indiquent la première version du navigateur qui prenait en charge la propriété préfixée.

Propriété
animation-direction	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

La propriété animation-direction définit si une animation doit être jouée en sens inverse en alternance selon les cycles.

Remarque :Si l'animation est configurée pour ne se jouer qu'une seule fois, cette propriété n'a aucun effet.

Valeur par défaut :	normal
Héritée :	non
Animable :	Non. VoirAnimable。
version :	CSS3
Syntaxe JavaScript :	object.style.animationDirection="reverse" Essayez-le vous-même

Valeur	Description	Test
normal	Valeur par défaut. L'animation se joue normalement.
reverse	Lecture de l'animation en sens inverse.
alternate	L'animation est jouée en avant sur les cycles impairs (1, 3, 5...), et en sens inverse sur les cycles pairs (2, 4, 6...).
alternate-reverse	L'animation est jouée en sens inverse sur les cycles impairs (1, 3, 5...), et en avant sur les cycles pairs (2, 4, 6...).
initial	Définit cette propriété sur sa valeur par défaut. Voirinitial。
inherit	Hérite de la propriété de l'élément parent. Voir aussiinherit。

autres extensions