Animation-duration - Propriété CSS

Schéma de la syntaxe de animation-duration.

Description des termes utilisés sur le schéma :

• duration est une valeur numérique positive ou nulle, suivie d'une des unités de durée.
• Plusieurs valeurs peuvent être spécifiées, séparées par des virgules, lorsque plusieurs animations sont déclarées.

Description de la propriété animation-duration.

animation-duration définit la durée de l'animation, en secondes ou en millisecondes. Plus cette durée est courte, plus l'animation sera rapide.

Il et nécessaire de définir une durée pour les animations afin que celles-ci soient opérationnelles.

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

Valeurs pour animation-duration.

• animation-duration: auto;

  Pour les animations classiques, pilotées par le temps, auto est équivalent à 0.
  Pour les animations pilotées par un défilement, auto est évalué en fonction des propriétés animation-range, animation-delay et animation-iteration-count.

• animation-duration: 5s;

  Un nombre positif ou nul, avec une des unités de durée. Ce nombre définit la durée de l'animation. Autrement dit, plus ce nombre est grand, plus l'animation sera lente.

  Si la valeur indiquée est 0, l'animation n'est pas visible mais tout se passe comme si elle avait été réalisée instantanément : les événements animationstart et animationend sont déclenchés, et les propriétés animées sont fixées à leur valeur de fin d'animation (définie par animation-fill-mode).

• animation-duration: 5s, 2s...;

  Une série de nombres positifs ou nuls, avec une unité de temps, et séparés par des virgules. Cette syntaxe est utilisable si plusieurs animations ont été définies par animation-name. Reportez-vous à la page sur les animations multiples pour plus de précisions sur les animations multiples.

• animation-duration: initial; (auto) animation-duration: inherit; animation-duration: revert; animation-duration: revertLayer; animation-duration: unset;

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

Exemple d'animation de animation-duration.

Comme toutes les propriétés qui sont relatives à l'animation, animation-duration ne peut pas être elle-même animée.

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

Modifier la durée d'une animation en Javascript.

En Javascript, voici comment modifier la valeur de animation-duration suivant les deux syntaxes possibles : en kebab-case et en camel-case pour le nom de la propriété.

On constate que modifier la durée pendant que l'animation est cours d'exécution altère la continuité de cette dernière : cela provoque un saut dans la progression. On peut faire le test avec le simulateur.

let el = document.getElementById('id'); el.style['animation-duration'] = '5000ms'; // ou let el = document.getElementById('id'); el.style.animationDuration = '5000ms';

Lire en Javascript la durée d'une animation.

La propriété doit avoir été affectée directement à l'élément lui-même par l'attribut style et non pas en CSS, en passant par un sélecteur CSS. La durée de l'animation est renvoyée telle qu'elle a été définie, dans la même unité.

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

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

La valeur calculée est celle qui résulte de l'évaluation des unités relatives et de la prise en compte éventuelle des valeurs héritées.Ou, à défaut, il s'agit de la valeur initiale de la propriété : (auto) dans le cas de animation-duration.
Pour animation-duration, la durée est retournée en secondes quelque soit l'unité utilisée pour la définir.

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

Modifier la durée d'une animation avec JQuery.


$('#id').css('animation-duration', '5000ms');
// ou
$('#id').css('animationDuration', '5000ms');


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

Comme en Javascript, la durée est retournée en secondes.

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

Autres exemples de code.

Reportez-vous à la page Javascript et CSS pour trouver d'autres exemples de codes.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-duration et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est sérialisée (mémorisée) la valeur de animation-duration. On constate en particulier que les durées sont converties en secondes.

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

Le simulator permet de choisir une durée pour l'animation, et donc en conséquence la vitesse de déplacement du cercle.

Compatibilité des navigateurs avec animation-duration.

Pas de problème de compatibilité à signaler entre animation-duration et les navigateurs modernes.

Remarques :

(1) Une fois l’élément chargé, la modification de la valeur de cette propriété n’a aucun effet.

1

Support des
animations

2

Propriété
animation-duration

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

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-duration.

• Module CSS - Animations Niveau 1

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

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Ajout de la valeur auto pour la propriété animation-duration.
  Changement de la valeur initiale de la propriété en auto (précédemment 0s).
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des animations.

Le fonctionnement et le paramétrage des animations sont décrits dans le module CSS Animations de la norme CSS. La liste ci-dessous reprend les directives et propriétés en rapport avec les animations.

Propriétés :

Directives :