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.
Die animation-play-state CSS Eigenschaft legt fest, ob eine Animation läuft oder pausiert ist.
Eine pausierte Animation wieder aufzunehmen bedeutet, dass die Animation an der Stelle fortgesetzt wird, an der sie pausiert wurde, anstatt von vorne zu beginnen.
Probieren Sie es aus
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 #333333;
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%;
}
}
Syntax
/* Single animation */
animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */
animation-play-state: paused, running, running;
/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
Werte
Hinweis:
Wenn Sie mehrere durch Kommas getrennte Werte in einer animation-* Eigenschaft angeben, werden sie auf die Animationen in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und der animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.
Formale Definition
| Anfangswert | running |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
animation-play-state =
<single-animation-play-state>#
<single-animation-play-state> =
running |
paused
Beispiele
Eine Animation pausieren
Diese Animation ist pausiert, läuft jedoch, wenn Sie darüber fahren.
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.box:hover {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Ergebnis
Fahren Sie über das Rechteck, um die Animation abzuspielen.
Siehe CSS-Animationen für Beispiele.
Spezifikationen
| Specification |
|---|
| CSS Animations Level 1 # animation-play-state |
Browser-Kompatibilität
Siehe auch
- Verwendung von CSS-Animationen
- JavaScript
AnimationEventAPI - Andere verwandte Animations-Eigenschaften:
animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-timeline,animation-timing-function