CSS/Eigenschaften/animation-direction

Die Eigenschaft animation-direction legt fest, welchen Verlauf die Animation nehmen soll.

erlaubte Werte	normal: (Standardwert) reverse: Animation soll rückwärts ablaufen alternate: wird jeweils 1x vor (1,3,5,etc..) und dann rückwärts (2,4,6,etc...) abgespielt alternate-reverse: wird jeweils 1x rückwärts (1,3,5,etc..) und dann vorwärts (2,4,6,etc...) abgespielt initial: Setzt den Wert auf den Standardwert zurück. inherit: Erbt den Wert vom Elternelement. Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: normal
anwendbar auf	alle Elemente, Pseudoelemente ::before und ::after (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

@keyframes beispiel {
    from {background-color: #000;}
    to {background-color: #fff;}
}

aside {
    animation-name: beispiel 
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite; 
}

Die Animation wird immer wieder wiederholt. Dabei läuft sie einamel vor vorwärts und bei jedem 2. Durchlauf wieder rückwärts ab.

Weblinks

• Spezifikation (W3C): animation-direction
• MDN: animation-direction

Siehe auch

• CSS/Tutorials/Animation/Animation#animation-direction