CSS animation-direction-Eigenschaft
Die CSS-animation-direction-Eigenschaft legt fest, wie eine Animation abgespielt werden soll: vorwärts, rückwärts oder in abwechselnden Zyklen. Der Standardwert ist normal.
Wenn für eine beliebige Animationseigenschaft mehrere durch Kommas getrennte Werte angegeben werden, werden sie in der Reihenfolge auf die entsprechenden Animationen angewendet, die in animation-name definiert sind.
Die Eigenschaft animation-direction ist eine der CSS3-Eigenschaften.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::before und ::after Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.animationDirection = "reverse" |
Syntax
Syntax der CSS animation-direction-Eigenschaft
css
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;Beispiel zur animation-direction-Eigenschaft:
Beispiel zur CSS animation-direction-Eigenschaft mit dem Wert normal
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays forwards.</p>
<div></div>
</body>
</html>Beispiel zur animation-direction-Eigenschaft mit dem Wert "reverse":
Beispiel zur CSS animation-direction-Eigenschaft mit dem Wert reverse
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>In this example the animation plays as reverse.</p>
<div></div>
</body>
</html>Beispiel zur animation-direction-Eigenschaft mit dem Wert "alternate":
Beispiel zur CSS animation-direction-Eigenschaft mit dem Wert alternate
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays first forwards, then backwards.</p>
<div></div>
</body>
</html>Beispiel zur animation-direction-Eigenschaft mit dem Wert "alternate-reverse":
Beispiel zur CSS animation-direction-Eigenschaft mit dem Wert alternate-reverse
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate-reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards, then forwards.</p>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung | Abspielen |
|---|---|---|
| normal | Standardwert. Die Animation wird vorwärts abgespielt. | Abspielen » |
| reverse | Die Animation wird rückwärts abgespielt. Bei jedem Start wird sie vom Ende zurückgesetzt und beginnt von vorn. Die Timing-Funktion wird ebenfalls umgekehrt. | Abspielen » |
| alternate | Zuerst bewegt sich die Animation vorwärts, dann rückwärts. Erfordert animation-iteration-count ≥ 2, um sichtbar zu sein. | Abspielen » |
| alternate-reverse | Zuerst bewegt sich die Animation rückwärts, dann vorwärts. Erfordert animation-iteration-count ≥ 2, um sichtbar zu sein. | Abspielen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Welche möglichen Werte hat die CSS-Eigenschaft animation-direction?