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-play-state - Propriété CSS

animation-play-state

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

Description rapide
État de l'animation (en cours ou en pause).
Statut
Standard
Type de valeur
Valeur prédéfinie (plusieurs valeurs possibles si animations multiples)
Valeurs prédéfinies
running | paused
Pourcentages
Ne s'appliquent pas.
Valeur initiale
running
Héritée par défaut
Non
Type d'animation
Not animatable : la propriété animation-play-state 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)

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:
Schéma syntaxique de la propriété animation-play-stateSyntaxe de la propriété animation-play-state. running running paused paused , ,
;
  • 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 page animation.

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

animation-play-state :

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Support général des animations en CSS : correct avec tous les navigateurs modernes.
Colonne 2
Compatibilité des navigateurs avec la propriété animation-play-state.
1
Animations
2
animation-play-state
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-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.

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).
Définit la durée totale de l'animation.
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.
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.