CSS-Eigenschaft: animation-direction, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)
Abspielrichtung einer Animation
Steuert die Abspielrichtung einer Animation: Vorwärts, rückwärts oder beides alternierend.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Abspielrichtung einer Animation |
| normal |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Animations (CSS 3):
- animation
- animation-delay
- Aktuelle Seite: animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Folgendes ist beim Einsatz von animation-direction zu beachten:
animation-direction steuert, in welcher Richtung die über die Keyframe-Regel definierte Animation abgespielt wird.
Dabei stehen vier mögliche Werte zur Verfügung:
normalspielt die Animation von 0% - 100% ab. In jedem weiteren Durchlauf beginnt die Animation wieder bei 0%. Ist der Standardwert und wird vom Browser verwendet, fallsanimation-directionnicht explizit definiert ist.reversebewirkt, dass eine Animation rückwärts, also von 100% - 0% abgespielt. Jeder weitere Durchlauf wird ebenfalls rückwärts dargestellt.alternatelässt eine Animation alternierend laufen. Sprich: sie beginnt bei 0%, läuft bis 100% und von dort aus wieder auf 0% zurück. Jeder ungerade Durchlauf wird demnach vorwärts, jede gerade Durchlauf rückwärts angezeigt.alternate-reverseist das Gegenstück zualternate. Dieser Wert bewirkt ebenfalls das alternierende Abspielen der Animation, wobei hier die Animation bei 100% startet.
Zu beachten ist, dass bei den Werten reverse und alternate-reverse
nicht nur die Abspielrichtung der Animation umgekehrt ist. Auch die animation-timing-function
wird umgekehrt animiert. Bei der Ansicht von Beispiel Nr. 4 und Nr. 5 auf einen Blick wird deutlich, dass die Dynamik der Animation rückwärts angezeigt, anders wirkt als vorwärts.
Opera unterstützt animation-direction seit der Version 12.1 in der Standardschreibweise.
Allerdings nicht zuverlässig, unter bestimmten Konditionen bricht die Animation einfach ab.
Safari unterstützt animation-direction mit dem Vendor-Präfix -webkit- die Parameter
normal und alternate. Die beiden "Rückwärts"-Werte reverse und
alternate-reverse kennt der Safari nicht, die Animation wird dann mit dem Parameter normal
Google Chrome benötigt ebenfalls das Vendor-Präfix -webkit-,
unterstützt aber alle vier Werte ab der Version 19.
Laut Dokumentation unterstützt der Internet Explorer 10 Animationen. Dies ist allerdings noch nicht verifiziert und hier unter Vorbehalt erwähnt.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||
Weiterführende Informationen zu animation-direction:
- W3C Spezifikation:
http://www.w3.org/TR/css3-animations/#animation-direction
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
animation-delay - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
animation-duration
Beispiele
HTML:
<div id="example-1" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
/* Der schwarze Rahmen für die Box und die Animation an sich werden mit den folgenden Zeilen definiert.
Diese wirken auf alle folgende Beispiele. */
div {
width: 300px;
height: 300px;
border: 4px solid black;
}
/* Über den "identifier" (hier "move-ball") und die CSS-Eigenschaft animation-name (bzw. -webkit-animation-name für die Webkit-Browser)
wird die Animation zugewiesen.
Für die Beispiele auf dieser Seite wird die Wiederholung (animation-iteration-count) auf "infinite" (endlos)
und eine Länge (animation-duration) auf 4 Sekunden festgelegt. */
div.examples img {
position: relative;
-webkit-animation-name: move-ball;
animation-name: move-ball;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
/* Über die Keyframe-Regel wird die eigentliche Animation definiert. */
@-webkit-keyframes move-ball {
from {
left: 0px;
top: 0px;
}
25% {
left: 200px;
top: 0px;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0px;
top: 200px;
}
to {
left: 0px;
top: 0px;
}
}
@keyframes move-ball {
from {
left: 0px;
top: 0px;
}
25% {
left: 200px;
top: 0px;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0px;
top: 200px;
}
to {
left: 0px;
top: 0px;
}
}
/* Keine ausdrückliche Angabe von animation-direction - die über die Keyframe-Regel definierte Animation
wird von 0 bis 100% durchlaufen und startet jeden weiteren Durchlauf wieder von vorne. */
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-2 img {
-webkit-animation-direction: normal;
animation-direction: normal;
}
/* Angabe von normal. Da dies dem Standardwert entspricht, unterscheidet sich hier die
Animation nicht von der im Beispiel Nr. 1*/Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-3 img {
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
/* Mit dem Wert reverse läuft die Animation rückwärts ab.
Wie hier zu sehen, wird auch die animation-timing-function (mehr dort) umgekehrt dargestellt. */Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="example-4" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-4 img {
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
/* alternate steuert, dass die Animation nicht von vorne wiederholt wird, sondern beim Erreichen von 100%
dann rückwärst angezeigt wird.
Auch hier sieht man die Umkehrung der animation-timing-function*/Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="example-5" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-5 img {
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
}
/* alternate-reverse zeigt die Animation entsprechend zu reverse und alternate dar.
Die Animation beginnt sowohl von hinten, ebenfalls wird sie Hin-und-Her-pendelnd abgespielt. */Beispiel Nr. 5 So sieht's aus:
HTML:
<div id="testcase-vendor">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
@-webkit-keyframes allmargin {
from {
margin: 0px;
}
to {
margin: 90%;
}
}
#testcase-vendor img {
-webkit-animation-name: allmargin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
-webkit-animation-direction: alternate-reverse;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
HTML:
<div id="testcase-standard">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
@keyframes allmargin {
from {
margin: 0px;
}
to {
margin: 90%;
}
}
#testcase-standard img {
animation-name: allmargin;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-direction: alternate-reverse;
}Testbeispiel: Standardschreibweise
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!