animation-play-state
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.
La propriété animation-play-state définit si une animation est en cours d'exécution ou si elle est en pause.
Exemple interactif
animation-play-state: paused;
animation-play-state: running;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></div>
</section>
#example-element {
background-color: #1766aa;
color: white;
margin: auto;
margin-left: 0;
border: 5px solid #333;
width: 150px;
height: 150px;
border-radius: 50%;
}
.animating {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).
Syntaxe
css
/* On a une seule animation */
animation-play-state: running;
animation-play-state: paused;
/* On gère plusieurs animations */
/* avec des valeurs respectives */
animation-play-state: paused, running, running;
/* Valeurs globales */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;
Valeurs
Note :
Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, elles seront respectivement affectées aux animations définies par animation-name. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.
Définition formelle
| Valeur initiale | running |
|---|---|
| Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |
Syntaxe formelle
animation-play-state =
<single-animation-play-state>#
<single-animation-play-state> =
running |
paused
Exemples
CSS
css
p {
animation-duration: 3s;
animation-name: glissement;
animation-iteration-count: infinite;
}
.arret {
animation-play-state: paused;
}
.encours {
animation-play-state: running;
}
@keyframes glissement {
from {
margin-left: 100%;
width: 200%;
}
to {
margin-left: 0%;
width: 100%;
}
}
HTML
html
<p class="arret">
La Chenille et Alice se considérèrent un instant en silence. Enfin la Chenille
sortit le houka de sa bouche, et lui adressa la parole d’une voix endormie et
traînante.
</p>
<p class="encours">
Alice, un peu irritée du parler bref de la Chenille, se redressa de toute sa
hauteur.
</p>
Résultat
Spécifications
| Specification |
|---|
| CSS Animations Level 1 # animation-play-state |