CSS/Eigenschaften/animation-direction

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Animation-direction)
Wechseln zu: Navigation, Suche

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

Siehe auch