OUJOOD.COM
Définition et utilisation de la propriété CSS animation-play-state
La propriété animation-play-state indique si une animation CSS est en cours d'exécution ou mise en pause. Sa principale utilité en pratique : la contrôler via JavaScript pour arrêter ou reprendre une animation à tout moment, sans la réinitialiser.
Remarque : utilisez cette propriété dans un script JavaScript pour mettre en pause une animation au milieu d'un cycle, puis la reprendre exactement au même point.
Syntaxe CSS
animation-play-state: paused | running | initial | inherit;
| Valeur par défaut | running |
|---|---|
| Héritée | non |
| Animable | non — en savoir plus |
| Version | CSS3 |
| Syntaxe JavaScript | object.style.animationPlayState = "paused" |
Valeurs de la propriété animation-play-state
running : valeur par défaut. L'animation s'exécute normalement.
paused : l'animation est figée à son image courante. Elle reprend depuis ce point si on repasse à running.
initial : remet la propriété à sa valeur par défaut (running).
inherit : hérite de la valeur définie sur l'élément parent.
Compatibilité navigateurs
Les numéros indiquent la première version supportant la propriété sans préfixe. Les versions avec préfixe sont mentionnées pour information — elles concernent des navigateurs très anciens et ne sont plus nécessaires pour les projets récents.
| Navigateur |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Version | 43 4 -webkit- |
10 | 16 5 -moz- |
9 4 -webkit- |
30 15 -webkit- 12 -o- |
Exemple : animation en cours et animation en pause
Le cercle vert est animé (running). Le cercle rouge est figé dès le départ (paused).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS animation-play-state</title>
<style>
body { text-align: center; width: 80%; }
h1 { color: green; }
.cercle-vert {
width: 50px; height: 50px;
background: green;
border-radius: 50%;
position: relative;
animation: deplacement 5s;
animation-play-state: running; /* en cours d'exécution */
}
.cercle-rouge {
width: 50px; height: 50px;
background: red;
border-radius: 50%;
position: relative;
animation: deplacement 5s;
animation-play-state: paused; /* figé au départ */
}
@keyframes deplacement {
from { left: 0%; }
to { left: 80%; }
}
</style>
</head>
<body>
<h1>animation-play-state</h1>
<h2>Cercle vert : running</h2>
<div class="cercle-vert"></div>
<br>
<h2>Cercle rouge : paused</h2>
<div class="cercle-rouge"></div>
</body>
</html>
Contrôler l'animation via JavaScript
En ajoutant un événement onclick, on peut lancer l'animation du cercle rouge au clic — sans modifier le CSS initial :
<div class="cercle-rouge"
onclick='this.style.animationPlayState = "running"'>
</div>
<p>Cliquez sur le cercle rouge pour lancer son animation.</p>
Par carabde | Mis à jour le 29 avril 2026