Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

animation-duration - Propriété CSS

animation-duration

Résumé des caractéristiques de la propriété animation-duration

Description rapide
Définit la durée totale de l'animation.
Statut
Standard
Type de valeur
Durée (plusieurs valeurs peuvent être énumérées dans le cas d'anmations multiples).
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Not animatable : la propriété animation-duration ne peut pas être animée.
Module W3C
Module CSS - Animations
Références (W3C)
 🡇  
 🡅  
Statut du document:: ED (brouillon des éditeurs)

Statut du document:: WD (document de travail)

Description.

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.

Syntaxes pour animation-duration.

  • animation-duration: 5s;

    Un nombre positif ou nul, avec une unité de temps (voir les unités CSS 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 animation pour plus de précisions sur les animations multiples.

  • animation-duration: initial; animation-duration: inherit; animation-duration: revert; animation-duration: revert-layer; animation-duration: unset;

    La valeur initiale est : 0.

Animation de la propriété animation-duration.

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

Manipulation de la propriété animation-duration par programme.

L'élément el sur lequel travaillent les codes a été rendu visible ci-dessous. Sa marge gauche est animé pour évoluer en aller-retour (animation-direction:alternate) depuis 0 jusqu'à la largeur disponible.

Modifier la valeur de animation-duration 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 en faisant le test 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.


function setAnimationDuration(el) {
el.style['animation-duration']='5000ms';
// ou
el.style.animationDuration='5000ms';
}

Lire en Javascript la valeur de animation-duration.

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


function getAnimationDuration(el) {
alert(el.style['animation-duration']);
// ou
alert(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.


function getCalcAnimationDuration(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-duration'));
}

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


function setAnimationDuration(el) {
$(el).css('animation-duration','1s');
// ou
$(el).css('animationDuration','1s');
}

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

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


function getCalcAnimationDuration(el) {
alert($(el).css('animation-duration'));
// ou
alert($(el).css('animationDuration'));
}

Simulateur.

animation-duration :

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Support général des animations en CSS.
Colonne 2
Compatibilité des navigateurs avec la propriété CSS animation-duration.
1
Animations
2
animation-duration
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que animation-duration.

Les spécifications CSS éditées par le W3C sont organisées en modules. animation-duration fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Paramètres d'animation.
Définit comment interagissent plusieurs animations appliquées à la même propriété.
Temps d'attente avant le démarrage de l'animation.
Sens de l'animation (normal ou inverse).
Style de remplacement lorsque l'animation n'est pas en cours.
Définit le nombre de fois qu'une animation doit être jouée.
Définit l'animation à appliquer à l'élément.
État de l'animation (en cours ou en pause).
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
Définit la fonction d'accélération à utiliser pendant une animation.

Directives.

Définit le nom et les paramètres d'une animation.