animation-play-state

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 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

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

running

L'animation est en cours.

paused

L'animation est en pause.

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 initialerunning
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Valeur calculéecomme spécifié
Type d'animationNot 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

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-play-state
paused
running

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi