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 vorwärts und rückwärts abgespielt werden soll.
Es ist oft praktisch, die Kurzschreibweise animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.
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";
}
});
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 wird vorwärts in jedem Zyklus abgespielt. Mit anderen Worten, jedes Mal, wenn die Animation zyklisch wiederholt wird, wird sie in den Anfangszustand zurückgesetzt und startet erneut. Dies ist der Standardwert.
reverse-
Die Animation wird rückwärts in jedem Zyklus abgespielt. Mit anderen Worten, jedes Mal, wenn die Animation zyklisch wiederholt wird, wird sie in den Endzustand zurückgesetzt und startet erneut. Animation-Schritte werden rückwärts ausgeführt, und Easing-Funktionen werden ebenfalls umgekehrt. Beispielsweise wird eine
ease-inEasing-Funktion zuease-out. alternate-
Die Animation wechselt die Richtung in jedem Zyklus, wobei die erste Iteration vorwärts abgespielt wird. Die Zählung, um zu bestimmen, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
alternate-reverse-
Die Animation wechselt die Richtung in jedem Zyklus, wobei die erste Iteration rückwärts abgespielt wird. Die Zählung, um zu bestimmen, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
Hinweis:
Wenn Sie mehrere kommagetrennte Werte bei 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 animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Werteigenschaften.
Hinweis:
Beim Erstellen von scroll-gesteuerten CSS-Animationen funktioniert die Angabe einer animation-direction wie erwartet. Zum Beispiel bewirkt reverse, dass die Animation im Verlauf des Zeitstrahls rückwärts läuft. Ein Wert von alternate (in Kombination mit einer animation-iteration-count) bewirkt, dass die Animation vorwärts und rückwärts läuft, während der Zeitstrahl fortschreitet.
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
Umkehren 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
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