animation-duration - Propriété CSS
Résumé des caractéristiques de la propriété animation-duration
0
animation-duration
ne peut pas être animée.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énementsanimationstart
etanimationend
sont 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 pageanimation
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.
Prise en charge par les navigateurs (compatibilité).
animation-duration
.
animation-duration
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.