La propriété animation-direction indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.

Généralement, on passera par la propriété raccourcie animation qui permet de définir les différentes propriétés liées aux animations avec une déclaration.

Syntaxe

/* Valeurs avec un mot-clé */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Gestion de plusieurs animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Valeurs globales */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

Valeurs

normal
L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.
reverse
L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.
alternate
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (timing functions) sont également inversées (ease-in sera ainsi remplacée par ease-out). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.
alternate-reverse
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.

Note : Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, selon leur quantité, elles seront différemment affectées aux animations définies par animation-name. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

Syntaxe formelle

<single-animation-direction>#


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

Exemples

CSS

p {
  animation-duration: 5s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}

.aller {
  animation-direction: normal;
}

.retour {
  animation-direction: reverse;
}
@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

HTML

<p class="aller">
  La Chenille et Alice se considérèrent un instant en silence.
  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
  la parole d’une voix endormie et traînante.
</p>

<p class="retour">
  « Revenez, » lui cria la Chenille. « J’ai quelque chose 
  d’important à vous dire ! »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Animations
La définition de 'animation-direction' dans cette spécification.
Version de travail Définition initiale.

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 43
Support complet 43
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 16
Support complet 16
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 10Opera Support complet 30
Support complet 30
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12.1 — 15
Aucun support 12 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet Oui
Support complet Oui
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 43
Support complet 43
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 43
Support complet 43
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 16
Support complet 16
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 30
Support complet 30
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12.1 — 14
Aucun support 12 — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 4.0
Support complet 4.0
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
reverseChrome Support complet 19Edge Support complet 12Firefox Support complet 16IE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android Aucun support NonChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 16Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
alternate-reverseChrome Support complet 19Edge Support complet 12Firefox Support complet 16IE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 16Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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