Animation-direction - Propriété CSS

Schéma de la syntaxe de animation-direction.

Description de la propriété animation-direction.

La propriété animation-direction définit si l'animation est jouée dans le sens défini par la directive @keyframes ou dans le sens inverse. Si l'animation est répétée plusieurs fois, animation-direction peut également déterminer si l'animation doit faire des 'aller-retour' ou pas.

Pour une présentation générale des animations, reportez-vous à la page animations en CSS.

Valeurs pour animation-direction.

• animation-direction: normal;

  Valeur par défaut. L'animation est jouée dans le sens défini par @keyframes. Ici l'animation définie par @keyframes passe du rose (from) au bleu ciel (to), puis revient brutalement au rose lorsque le cycle est terminé.

  animation-direction:normal;
• animation-direction: reverse;

  L'animation est jouée dans le sens inverse de celui défini par @keyframes (en commençant par la fin).

  animation-direction:reverse;
• animation-direction: alternate;

  L'animation est jouée d'abord à l'endroit, puis à l'envers. Cela suppose que la propriété animation-iteration-count a été fixée à une valeur supérieure à 1, ou sur infinite.

  animation-direction:alternate;
• animation-direction: alternate-reverse;

  L'animation est jouée d'abord à l'envers, puis à l'endroit, etc. Comme pour la valeur précédente, cela suppose que la propriété animation-iteration-count a été fixée à une valeur supérieure à 1, ou sur infinite.

  animation-direction:alternate-reverse;
• animation-direction: alternate, normal, ...;

  Une série de valeurs séparées par des virgules. Cette syntaxe est utilisable lorsque plusieurs animations ont été définies par la propriété animation-name. Pour davantage de détails sur les animations multiples, reportez-vous à la page sur les animations multiples.

• animation-direction: initial; (normal) animation-direction: inherit; animation-direction: revert; animation-direction: revertLayer; animation-direction: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de animation-direction.

Pas d'animation possible pour la propriété animation-direction elle-même.

Accéder à la propriété animation-direction par programme.

Modifier la valeur de animation-direction en Javascript.

En Javascript, voici comment modifier la valeur de animation-direction pour un élément el. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots), plus courante en Javascript.

let el = document.getElementById('id'); el.style['animation-direction'] = 'reverse, normal'; // ou let el = document.getElementById('id'); el.style.animationDirection = 'reverse, normal';

Relire en Javascript la valeur de animation-direction.

Cet exemple de code récupère la valeur de l'attribut style du HTML. Autrement dit, la propriété doit avoir été affectée directement à l'élément lui-même en utilisant l'attribut style, et non pas en passant via un sélecteur CSS. Ce code est donc un peu le symétrique du précédent.

let el = document.getElementById('id'); let value = el.style['animation-direction']; // ou let el = document.getElementById('id'); let value = el.style.animationDirection;

Lire la valeur calculée de animation-direction en Javascript.

La valeur calculée est celle qui résulte de l'évaluation de la cascade d'héritages, ou bien la valeur affectée directement à l'élément via un sélecteur CSS, ou bien via sont attribut style, ou bien, en dernier recours, la valeur initiale de la propriété, normal dans le cas de animation-direction). Dans tous les cas la valeur calculée est toujours définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-direction');

Modifier la valeur de la propriété animation-direction avec JQuery.


$('#id').css('animation-direction', 'reverse, normal');
// ou
$('#id').css('animationDirection', 'reverse, normal');


Lire la valeur calculée de la propriété animation-direction avec JQuery.

let value = $('#id').css('animation-direction');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-direction et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de animation-direction il n'y aura pas de différence entre ces deux valeurs.

Exemple interactif avec la propriété animation-direction.

Le simulateur ci-dessous utilise une animation nommée demo1 qui déplace un élément horizontalement sur une grande partie de la ligne. Cela se fait en modifiant la marge gauche de l'élément.

Remarque : la différence entre alternate et reverse-alternate n'est pas vraiment visible car cela supposerait de recharger la page, ce qui remet la propriété à la valeur normal. On voit simplement le rectangle changer de sens.

Compatibilité des navigateurs avec animation-direction.

Aucun problème de compatibilité à signaler au sujet de la propriété animation-direction.

1

Support des
animations

2

Propriété
animation-direction

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété animation-direction.

• Module CSS - Animations Niveau 1

  Introduction des animations en CSS et première définition pour la propriété animation-direction.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Pas de changement concernant la propriété animation-direction.
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des animations.

Toutes les spécifications concernant les animations sont regroupées dans le module CSS Animations de la norme CSS(W3C).

Propriétés :

Directives :