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 angehalten ist.
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%;
}
}
Das Fortsetzen einer angehaltenen Animation führt dazu, dass die Animation an der Stelle fortgesetzt wird, an der sie angehalten wurde, anstatt von Anfang der Animationssequenz neu zu starten.
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 diese auf die Animationen in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und die 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
Anhalten einer Animation
Diese Animation ist angehalten, läuft jedoch, wenn Sie mit der Maus 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 mit der Maus ü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
Loading…
Siehe auch
- Verwendung von CSS-Animationen
- JavaScript
AnimationEventAPI - Andere verwandte Animationseigenschaften:
animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-timeline,animation-timing-function