animation-direction CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.
Die animation-direction CSS Eigenschaft legt fest, ob eine Animation vorwärts, rückwärts oder abwechselnd zwischen vorwärts und rückwärts ablaufen 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 läuft vorwärts in jedem Zyklus ab. Mit anderen Worten: Jedes Mal, wenn die Animation durchläuft, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist der Standardwert.
reverse-
Die Animation läuft rückwärts in jedem Zyklus ab. Mit anderen Worten: Jedes Mal, wenn die Animation durchläuft, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut. Animierschritte werden rückwärts ausgeführt, und auch die "Easing"-Funktionen werden umgekehrt. Zum Beispiel wird eine
ease-in-Funktion zuease-out. alternate-
Die Animation kehrt die Richtung in jedem Zyklus um, wobei die erste Iteration vorwärts gespielt wird. Die Zählung zur Bestimmung, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
alternate-reverse-
Die Animation kehrt die Richtung in jedem Zyklus um, wobei die erste Iteration rückwärts gespielt wird. Die Zählung zur Bestimmung, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
Hinweis:
Wenn Sie mehrere durch Kommas getrennte Werte bei einer animation-*-Eigenschaft angeben, werden diese 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 Mehrere Animationswerte festlegen.
Hinweis:
Bei der Erstellung von CSS scroll-gesteuerten Animationen funktioniert die Angabe einer animation-direction wie erwartet, zum Beispiel führt reverse dazu, dass die Animation rückwärts über den Verlauf der Zeitachse abläuft. Ein Wert von alternate (in Verbindung mit einem animation-iteration-count) führt dazu, dass die Animation vorwärts und rückwärts abläuft, während die Zeitachse 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
| Spezifikation |
|---|
| 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