animation-play-state - Propriété CSS
Résumé des caractéristiques de la propriété animation-play-state
running
| paused
running
animation-play-state
ne peut pas être animée.A quoi sert la propriété CSS animation-play-state
?
La propriété animation-play-state
définit l'état d'une animation : en pause ou en fonctionnement.
Il est donc possible à tout moment d'interrompre une animation, avec un script Javascript par exemple.
Si animation-play-state
est fixée à paused
pendant le temps d'attente d'une animation, (voir animation-delay
) ce temps est augmenté d'autant.
Autrement dit, le temps d'attente non consommé au moment de la mise en pause, sera consommé lorsque animation-play-state
est à nouveau fixé à running
.
Pour une présentation générale des animations, consultez la page les animations en CSS.
Valeurs pour animation-play-state
.
animation-play-state:
;
- animation-play-state: running;
Valeur par défaut. L'animation est jouable, si tous ses paramètres nécessaires sont définis.
- animation-play-state: paused;
L'animation est en pause. Elle n'est pas jouable.
- animation-play-state: running, running, ...;
Une série de valeurs séparées par des virgules. Cette syntaxe est utile si plusieurs animations sont définies.
Pour plus de détails sur les animations multiples, consultez la pageanimation
. - animation-play-state:
initial
; animation-play-state:inherit
; animation-play-state:revert
; animation-play-state:revert-layer
; animation-play-state:unset
;La valeur initiale est :
.running
Animation de la propriété animation-play-state
.
La propriété animation-play-state
ne peut pas faire elle-même l'objet d'une animation.
Manipulation de la propriété animation-play-state
par programme.
L'élément el
utilisé pour la démonstration est visualisé ci-dessous. Sa marge gauche est animée entre 0 et 400 pixels.
Modifier la valeur de la propriété animation-play-state
revient à stopper ou démarrer l'animation.
Modifier la valeur de animation-play-state
en Javascript.
Le code Javascript ci-dessous (deux variantes) stoppe l'animation en donnant à la propriété animation-play-state
la valeur paused
.
Le code JQuery un peu plus bas redémarre l'animation en affectant la valeur running
à cette même propriété.
function setAnimationPlayState(el) {
el.style['animation-play-state']='paused';
// ou
el.style.animationPlayState='paused';
}
Lire en Javascript la valeur de animation-play-state
.
Le code Javascript ci-dessous fonctionne lorsque la propriété a été affectée sur l'élément lui même, dans le code HTML, avec l'attribut
style
, ou avec un code comme celui qui est présenté ci-dessus.
function getAnimationPlayState(el) {
alert(el.style['animation-play-state']);
// ou
alert(el.style.animationPlayState);
}
Lire la valeur calculée de animation-play-state
en Javascript.
La valeur calculée est celle qui a été affectée à l'élément via un sélecteur CSS, ou directement via l'attribut style
du HTML.
A défaut la valeur calculée sera une valeur héritée ou la valeur initiale.
function getCalcAnimationPlayState(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-play-state'));
}
Modifier la valeur de la propriété animation-play-state
avec JQuery.
Le code ci-dessous, en JQuery (2 variantes), démarre l'animation en affectant la valeur running
à la propriété animation-play-state
.
function setAnimationPlayState(el) {
$(el).css('animation-play-state','running');
// ou
$(el).css('animationPlayState','running');
}
Lire la valeur calculée de la propriété animation-play-state
avec JQuery.
function getCalcAnimationPlayState(el) {
alert($(el).css('animation-play-state'));
// ou
alert($(el).css('animationPlayState'));
}
Simulateur.
Prise en charge par les navigateurs (compatibilité).
animation-play-state
.
animation-play-state
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-play-state
.
Les spécifications CSS éditées par le W3C sont organisées en modules. animation-play-state
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.