Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: animation-direction
KurzbeschreibungWerteStandardwertKategorieHinweis
Abspielrichtung einer Animation
  • normal
  • reverse
  • alternate
  • alternate-reverse
normal
Allgemein:
Animierte Inhalte
CSS 3:
Animations
Neu in CSS 3
 

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:

  • normal spielt die Animation von 0% - 100% ab. In jedem weiteren Durchlauf beginnt die Animation wieder bei 0%. Ist der Standardwert und wird vom Browser verwendet, falls animation-direction nicht explizit definiert ist.
  • reverse bewirkt, dass eine Animation rückwärts, also von 100% - 0% abgespielt. Jeder weitere Durchlauf wird ebenfalls rückwärts dargestellt.
  • alternate lä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-reverse ist das Gegenstück zu alternate. 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.

Browserunterstützung von animation-direction
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20
-webkit-
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6
-webkit-
Version: 10Version: 11Version: 12
nj

Weiterführende Informationen zu animation-direction:



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 nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Safari
-webkit-: 4
Google Chrome
-webkit-: ?W3C: 19

Beispiel Nr. 1 So sieht's aus:

Blaue Kugel
 

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 nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Safari
-webkit-: 4
Google Chrome
-webkit-: ?W3C: 19

Beispiel Nr. 2 So sieht's aus:

Blaue Kugel
 

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 nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Google Chrome
-webkit-: ?W3C: 19

Beispiel Nr. 3 So sieht's aus:

Blaue Kugel
 

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 nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Safari
-webkit-: 4
Google Chrome
-webkit-: ?W3C: 19

Beispiel Nr. 4 So sieht's aus:

Blaue Kugel
 

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 nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Google Chrome
-webkit-: ?W3C: 19

Beispiel Nr. 5 So sieht's aus:

Blaue Kugel
 

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;           
}
Beispiel nur für: Google Chrome
-webkit-: ?

Testbeispiel: Schreibweise mit
Vendor-Präfix

Rote Kugel
 

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;           
}
Beispiel nur für: Firefox
W3C: 16
Internet Explorer
W3C: 10
Opera
W3C: 12.1

Testbeispiel: Standardschreibweise

Rote Kugel
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.173 sec.

Browser-Marktanteile