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

Utilisable sur

HTML

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 animable : la propriété animation-play-state ne peut pas être animée.

Module W3C

Module CSS - Animations

Références (W3C)

🡇

🡅

CSS Animations Level 2

Statut du document: WD (document de travail)

CSS Animations Level 1

Statut du document: WD (document de travail)

Schéma syntaxique de `animation-play-state`.

Schéma syntaxique de la propriété animation-play-state
Plus de détails sur la syntaxe

Légende :

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

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

Valeurs standards acceptées par toutes les propriétés:


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.

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.

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

animation-play-state :

running

paused

Prise en charge par les navigateurs (compatibilité).

Colonne 1

Capacité de prendre en charge de façon générale les animations en CSS.

Colonne 2

Support de la propriété animation-play-state pour interrompre une animation.

Support des
animations

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

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