animation-direction
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-direction CSS Eigenschaft legt fest, ob eine Animation vorwärts, rückwärts oder abwechselnd zwischen vorwärts und rückwärts gespielt werden soll.
Probieren Sie es aus
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
<section class="flex-column" id="default-example">
<div id="example-element"></div>
<button id="play-pause">Play</button>
</section>
#example-element {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: slide;
animation-play-state: paused;
animation-timing-function: ease-in;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333333;
color: white;
height: 150px;
margin: auto;
margin-left: 0;
width: 150px;
}
#example-element.running {
animation-play-state: running;
}
#play-pause {
font-size: 2rem;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");
button.addEventListener("click", () => {
if (el.classList.contains("running")) {
el.classList.remove("running");
button.textContent = "Play";
} else {
el.classList.add("running");
button.textContent = "Pause";
}
});
Es ist oft praktisch, die Kurzschreibweise animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.
Syntax
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;
Werte
normal-
Die Animation spielt vorwärts in jedem Zyklus. Mit anderen Worten, jedes Mal, wenn die Animation zyklisch abläuft, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt von neuem. Dies ist der Standardwert.
reverse-
Die Animation spielt rückwärts in jedem Zyklus. Mit anderen Worten, jedes Mal, wenn die Animation zyklisch abläuft, wird die Animation auf den Endzustand zurückgesetzt und beginnt von neuem. Animationsschritte werden rückwärts ausgeführt und die Timing-Funktionen werden ebenfalls umgekehrt. Zum Beispiel wird eine
ease-in-Funktion zuease-out. alternate-
Die Animation kehrt jede Runde die Richtung um, wobei die erste Iteration vorwärts gespielt wird. Die Zählung, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
alternate-reverse-
Die Animation kehrt jede Runde die Richtung um, wobei die erste Iteration rückwärts gespielt wird. Die Zählung, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
Hinweis:
Wenn Sie mehrere durch Kommas getrennte Werte bei einer animation-* Eigenschaft angeben, werden sie auf die Animationen in der Reihenfolge angewendet, in der die animation-names erscheinen. In Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationswerte.
Hinweis:
Wenn Sie CSS scrollgetriebene Animationen erstellen, funktioniert das Festlegen einer animation-direction wie erwartet, beispielsweise führt reverse dazu, dass die Animation rückwärts im Verlauf der Entwicklung der Timeline abläuft. Ein Wert von alternate (kombiniert mit einem animation-iteration-count) führt dazu, dass die Animation vorwärts und rückwärts läuft, während die Timeline weiterentwickelt wird.
Formale Definition
| Anfangswert | normal |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
animation-direction =
<single-animation-direction>#
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
Beispiele
Umkehrung der Animationsrichtung
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-direction: reverse;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Ergebnis
Siehe CSS-Animationen für Beispiele.
Spezifikationen
| Specification |
|---|
| CSS Animations Level 1 # animation-direction |
Browser-Kompatibilität
Loading…
Siehe auch
- Verwendung von CSS-Animationen
- JavaScript
AnimationEventAPI - Andere verwandte Animationseigenschaften:
animation,animation-composition,animation-delay,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timeline,animation-timing-function