Propriété CSS animation-play-state
CSS animation-play-state Property specified if the animation is running or it is paused. See an example and try it yourself.
La propriété CSS animation-play-state spécifie si l'animation est en cours d'exécution ou mise en pause. Si vous reprends une animation mise en pause, elle reprendra exactement là où elle s'était arrêtée au moment de la pause, plutôt que de recommencer depuis le début de la séquence. De plus, vous pouvez lancer une animation directement depuis un état mis en pause.
Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation quelconque, elles seront associées différemment aux animations définies dans animation-name.
La propriété animation-play-state fait partie des propriétés CSS3.
En JavaScript, cette propriété peut être utilisée pour mettre en pause l'animation en plein milieu d'un cycle.
| Valeur initiale | running |
|---|---|
| S'applique à | Tous les éléments. S'applique également aux pseudo-éléments ::before et ::after. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.animationPlayState = "paused"; |
Syntaxe
Syntaxe de la propriété CSS animation-play-state
animation-play-state: paused | running | initial | inherit;Exemple de la propriété animation-play-state avec la valeur "running" :
Exemple de la propriété CSS animation-play-state avec la valeur running
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #ccc;
position: relative;
animation: play 10s;
animation-play-state: running;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-play-state example</h2>
<p>Here the animation-play-state is set to "running".</p>
<div></div>
</body>
</html>Dans l'exemple suivant, l'animation s'arrêtera au survol.
Exemple de la propriété animation-play-state avec la valeur "paused" :
Exemple de la propriété CSS animation-play-state avec la valeur paused
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #8ebf42;
position: relative;
animation: play 1s infinite;
}
div:hover {
animation-play-state: paused;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<p>Hover over the green box to stop the animation.</p>
<div></div>
</body>
</html>Valeurs
| Valeur | Description | Jouer |
|---|---|---|
| running | Valeur par défaut lorsque l'animation est en cours d'exécution. | Jouer » |
| paused | L'animation est mise en pause. | Jouer » |
| initial | Définit la propriété sur sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'animation-play-state' ?