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ärtswiedergabe des Sequenz ablaufen 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 bequem, die Kurzform animation zu verwenden, um alle Animationseigenschaften gleichzeitig 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 ab. Mit anderen Worten, jedes Mal, wenn der Animationszyklus durchlaufen wird, wird die Animation in den Anfangszustand zurückgesetzt und beginnt von neuem. Dies ist der Standardwert.
reverse-
Die Animation spielt rückwärts in jedem Zyklus ab. Mit anderen Worten, jedes Mal, wenn der Animationszyklus durchlaufen wird, wird die Animation in den Endzustand zurückgesetzt und beginnt von neuem. Animationsschritte werden rückwärts ausgeführt, und Übergangsfunktionen werden ebenfalls umgekehrt. Zum Beispiel wird eine
ease-inÜbergangsfunktion zuease-out. alternate-
Die Animation kehrt in jedem Zyklus die Richtung um, 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 kehrt in jedem Zyklus die Richtung um, 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 auf einer animation-* Eigenschaft angeben, werden diese in der Reihenfolge auf die Animationen angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationswerte.
Hinweis:
Beim Erstellen von CSS scroll-gesteuerten Animationen funktioniert die Angabe einer animation-direction wie erwartet, zum Beispiel führt reverse dazu, dass die Animation im Verlauf der Zeitleistenentwicklung rückwärts abläuft. Ein Wert von alternate (in Kombination mit einem animation-iteration-count) bewirkt, dass die Animation vorwärts und rückwärts abläuft, während die Zeitleiste 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
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 Animations-Eigenschaften:
animation,animation-composition,animation-delay,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timeline,animation-timing-function