CSS/Eigenschaften/animation-direction

Browserunterstützung
caniuse.com

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

Standardwert

normal

anwendbar auf

alle Elemente, Pseudoelemente ::before und ::after

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.

Siehe auch

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

Weblinks

• Spezifikation (W3C): animation-direction
• MDN: animation-direction
• Details: caniuse.com