Animation-duration - Propriété CSS
Résumé des caractéristiques de la propriété animation-duration
autoanimation-duration ne peut pas être animée.Schéma de la syntaxe de animation-duration.
animation-durationLégende :
durationest une valeur numérique positive, 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.
Pour une présentation générale des animations, reportez-vous à la page animation.
Valeurs pour animation-duration.
- 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énementsanimationstartetanimationendsont déclenchés, et les propriétés animées sont fixées à leur valeur de fin d'animation (définie paranimation-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 pageanimationpour plus de précisions sur les animations multiples.
Valeurs globales
(communes à toutes les propriétés)
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 ue 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.
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.
Dans le cas de 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.
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-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.
Compatibilité des navigateurs avec animation-duration.
animation-duration.Remarques :
(1) Une fois l’élément chargé, la modification de la valeur de cette propriété n’a aucun effet.
animations
animation-durationNavigateurs 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
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 2009Document de travail.
-
Module CSS - Animations Niveau 2
Ajout de la valeurautopour la propriétéanimation-duration.
Changement de la valeur initiale de la propriété enauto(précédemment0s).02 Mars 2023Document 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.