We want to help developers like you. Tell us about how you work: http://qsurvey.mozilla.com/s3/Developer-Audience-Survey-V2/?s=mdn

animation-direction

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Résumé

La propriété CSS animation-direction précise si l'animation doit se jouer à l'envers ou selon des cycles alternés.

Il est souvent utile d'utiliser la propriété raccourcie animation afin de définir toutes les propriétés en une seule fois.

Valeur initialenormal
S'applique àtous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Syntax formelle : <single-animation-direction>#


<single-animation-direction> = normal | reverse | alternate | alternate-reverse

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

Valeurs

normal
L'animation doit se jouer vers l'avant à chaque cycle. En d'autres termes, à chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau. Ceci est la valeur par défaut de cette propriété.
alternate
L'animation doit changer de sens à chaque cycle. Lorsqu'elle est jouée à l'envers, les étapes de l'animation sont appliquées à reculons. De plus, la temporisation est aussi inversée. Par exemple une animation ease-in est remplacée par une animation ease-out lorsqu'elle est jouée à l'envers.
reverse
L'animation est jouée à l'envers à chaque cycle. A chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau.
alternate-reverse
Comme pour la valeur alternate, l'animation change de sens à chaque cycle. L'animation est jouée à l'envers lors du premier cycle, puis à l'endroit, ensuite à l'envers, et ainsi de suite.

Exemples

Voir Animations CSS pour les exemples.

Spécifications

Spécification Statut Commentaire
CSS Animations
La définition de 'animation-direction' dans cette spécification.
Version de travail Pour les deux nouvelles valeurs reverse et alternate-reverse, voir cette discussion W3C.

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base (Oui)-webkit 5.0 (5.0)-moz16.0 (16.0) 10 12-o
12.10 #
4.0-webkit
reverse 19 16.0 (16.0) 10 Pas de support Pas de support
alternate-reverse 19 16.0 (16.0) 10 Pas de support Pas de support
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base ? (Oui)-webkit 5.0 (5.0)-moz
16.0 (16.0)
? ? ?
reverse ? (Oui)-webkit 16.0 (16.0) ? ? ?
alternate-reverse ? (Oui)-webkit 16.0 (16.0) ? ? ?

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : teoli, Sebastianz, FredB, tregagnon
 Dernière mise à jour par : teoli,