animation-direction CSS propriété

Définition de la CSS animation-direction.

La propriété d'Animation CSS animation-direction permet de spécifier le sens de lecture de l'animation à appliquer, notamment pour les répétitions.

Exemple de syntaxe CSS animation-direction :

animation-direction : normal;
animation-direction : alternate;
animation-direction : reverse;
animation-direction : alternate-reverse;

La propriété d'Animation CSS animation-direction accepte une/des valeurs suivantes :

normal : commence la lecture de l'animation au début (0% ou from) et si l'animation Css3 boucle, réinitialise avec les propriétés CSS de départ. Valeur par défaut.
reverse : commence la lecture de l'animation à la fin (100% ou to) et si l'animation Css3 boucle, réinitialise avec les propriétés CSS de fin.
alternate : commence la lecture de l'animation au début (0% ou from) et si l'animation Css3 boucle, lit l'animation dans le sens inverse sans réinitialiser les propriétés CSS. Les fonctions de progression (animation-timing-function) sont inversées ease-in sera ainsi remplacée par ease-out.
alternate-reverse : commence la lecture de l'animation à la fin (100% ou to) et si l'animation Css3 boucle, lit l'animation dans le sens inverse sans réinitialiser les propriétés CSS. Les fonctions de progression (animation-timing-function) sont inversées ease-in sera ainsi remplacée par ease-out.

Découvrez la page dédiée pour comprendre le principe de base d'une animation en CSS3.

Exemple de code animation-direction CSS

Conditions d'application de la CSS animation-direction.

La valeur de la CSS animation-direction peut être mise directement dans la propriété de raccourci CSS animation.

Héritage des valeurs Css de animation-direction.

La valeur du sens de lecture d'une animation CSS animation-direction n'est pas héritée.

Problème d'interprétation de animation-direction en Css.

La propriété d'Animation CSS animation-direction pose des problèmes d'interprétation, n'est pas reconnue par Internet Explorer < 10 et Firefox < 19 et Opera < 12.1.

Règles de syntaxes CSS pour animation-direction.

Règle d'écriture du sens de lecture d'une animation : animation-direction

La propriété d'Animation CSS animation-direction accepte une ou plusieurs valeurs citées ci-dessus qui seront séparées par une virgule.
Le nombre de valeur est lié au nombre de nom d'animations déclaré dans propriété d'Animation CSS animation-name.
Si vos directions sont identiques, vous pouvez mettre une seule valeur.

Exemple d'écriture CSS de animation-direction :

.mes-animations{
  animation-name : animation-une, animation-deux;
  animation-direction : alternate, normal;
}

Compatibilités navigateurs de la propriété animation-direction

Détails des versions de la CSS animation-direction: Propriété animation-direction est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS animation-direction: Propriété CSS animation-direction est compatible à partir de Chrome 43; Propriété CSS animation-direction est compatible à partir de Firefox 16; Propriété CSS animation-direction est compatible à partir de Internet Explorer 10; Propriété CSS animation-direction plus ou moins compatible à partir de Opera 12.10; Propriété CSS animation-direction est incompatible pour Safari

Propriétés CSS préfixées de animation-direction

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété animation-direction CSS :

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation-direction.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation-direction.
Pour Opera 12+, vous pouvez utiliser : -o-animation-direction. Pour info, il semble les versions préfixées pour les animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété CSS -ms-animation-direction mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-animation-direction

Votre avis sur la définition animation-direction en CSS

Votez pour la définition CSS `animation-direction`

Votes: 4.7 / 5 - 6 votes
Cliquez sur une étoile pour voter.