Animation-play-state - Propriété CSS

Syntaxe de animation-play-state (schéma).

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

• Si plusieurs animations sont présentes, autant de valeurs peuvent être spécifiées en les séparant par des virgules.

Description de la propriété 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 sur les animations en CSS.

Valeurs pour 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 page sur les animations multiples.

• animation-play-state: initial; (running) animation-play-state: inherit; animation-play-state: revert; animation-play-state: revertLayer; animation-play-state: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'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.

La propriété animation-play-state et Javascript.

Modifier l'état de l'animation en Javascript.

Le code Javascript ci-dessous (deux variantes) stoppe l'animation en donnant à la propriété animation-play-state la valeur paused. deux syntaxes sont possibles : avec le nom de la propriété écrit en kebab-case ou en camel-case.

let el = document.getElementById('id'); el.style['animation-play-state'] = 'paused'; // ou let el = document.getElementById('id'); el.style.animationPlayState = 'paused';

Lire en Javascript l'état de l'animation.

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.

let el = document.getElementById('id'); let value = el.style['animation-play-state']; // ou let el = document.getElementById('id'); let value = 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 (running dans le cas de animation-play-state).

let el = document.getElementById('id'); let value = 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), stoppe l'animation en affectant la valeur paused à la propriété animation-play-state.


$('#id').css('animation-play-state', 'paused');
// ou
$('#id').css('animationPlayState', 'paused');


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

let value = $('#id').css('animation-play-state');

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-play-state et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée.

Simulateur avec la propriété animation-play-state.

Support de animation-play-state.

1

Support des
animations

2

Propriété
animation-play-state

Estimation de la prise en charge globale.

97%

96%

Navigateurs 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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la propriété animation-play-state.

• Module CSS - Animations Niveau 1

  Introduction des animations en CSS.
  Première définition de la propriété animation-play-state.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Pas de changement concernant la propriété CSS animation-play-state.
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des animations.

Tout ce qui concerne les animations est décrit dans le module de spécification CSS Animations publié par le W3C. Pour faciliter vos recherches nous listons ci-dessous les mots-clé en rapport avec les animations.

Propriétés :

Directives :