animation-play-state CSS propriété

Définition de la CSS animation-play-state.

La propriété d'Animation CSS animation-play-state permet de spécifier si l'animation CSS appliquée est en pause ou si l'animation est jouée.

Exemple de syntaxe CSS animation-play-state :
animation-play-state : running;
animation-play-state : paused;

La propriété d'Animation CSS animation-play-state accepte une/des valeurs suivantes :

  • paused : l'animation CSS est en pause.
  • running : l'animation CSS est jouée, valeur par défaut.

Découvrez la page dédiée pour comprendre le principe de base d'une animation en CSS3.

Conditions d'application de la CSS animation-play-state.

La valeur de la CSS animation-play-state peut être mise directement dans la propriété de raccourci CSS .

Héritage des valeurs Css de animation-play-state.

La valeur de la propriété d'Animation CSS animation-play-state n'est pas héritée.

Problème d'interprétation de animation-play-state en Css.

La propriété d'Animation CSS animation-play-state pose des problèmes d'interprétation, n'est pas reconnue par Internet Explorer < 10 et Firefox < 19 et Opera < 12.1.

Règles de syntaxes CSS pour animation-play-state.

Règle d'écriture de la propriété d'Animation CSS : animation-play-state

La propriété d'Animation CSS animation-play-state accepte une ou plusieurs valeurs citées ci-dessus qui seront séparées par une virgule.
Le nombre de valeur est lié au nombre de nom déclaré dans la propriété d'Animation CSS .
Si vos valeurs sont identiques, vous pouvez mettre une seule valeur.

Exemple d'écriture CSS de animation-play-state :
.mes-anamations{
  animation-name : animation-une, animation-deux;
  animation-play-state : running, paused;
}

Compatibilités navigateurs de la propriété animation-play-state

Propriétés CSS préfixées de animation-play-state

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété animation-play-state CSS :

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation-play-state.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation-play-state.
Pour Opera 12+, vous pouvez utiliser : -o-animation-play-state. Pour info, il semble les versions préfixées pour les animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété css -ms-animation-play-state mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-animation-play-state


Votre avis sur la définition animation-play-state en CSS

Votez pour la définition CSS animation-play-state

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/animation-play-state-css.html Votes: 5 / 5 - 5 votes
Cliquez sur une étoile pour voter.