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.
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%;
}
}
"use strict";
window.addEventListener("load", () => {
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 Animations-Eigenschaften 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, bei jedem Animationszyklus wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist der Standardwert.
reverse-
Die Animation spielt rückwärts in jedem Zyklus. Mit anderen Worten, bei jedem Animationszyklus wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut. Animationsschritte werden rückwärts ausgeführt, und auch die Übergangsfunktionen kehren sich um. Beispielsweise wird eine
ease-inÜbergangsfunktion zuease-out. alternate-
Die Animation wechselt die Richtung in jedem Zyklus, wobei die erste Ausführung vorwärts abgespielt wird. Die Zählung zur Bestimmung, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
alternate-reverse-
Die Animation wechselt die Richtung in jedem Zyklus, wobei die erste Ausführung rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.
Hinweis:
Wenn Sie mehrere kommagetrennte Werte auf einer animation-* Eigenschaft spezifizieren, werden sie in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und der animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.
Hinweis:
Beim Erstellen von scrollbasierten CSS-Animationen funktioniert die Spezifikation von animation-direction wie erwartet, z.B. führt reverse dazu, dass die Animation im Verlauf des Zeitstrahls rückwärts läuft. Ein Wert von alternate (kombiniert mit einer animation-iteration-count) führt dazu, 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
Richtung der Animation umkehren
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