#animation-direction

Legt fest, in welcher Richtung die Animation abgespielt wird.

default animation-direction: normal;

Die Animation wird vorwärts abgespielt. Wenn sie das Ende erreicht, beginnt sie wieder beim ersten Keyframe.

animation-direction: reverse;

Die Animation wird rückwärts abgespielt: Sie beginnt mit dem letzten Schlüsselbild und endet mit dem ersten Schlüsselbild.

animation-direction: alternate;

Die Animation wird zuerst vorwärts und dann rückwärts abgespielt:

  • Beginnt beim ersten Schlüsselbild
  • Hält am letzten Keyframe an
  • Beginnt erneut, aber beim letzten Keyframe
  • Hält am ersten Keyframe an

animation-direction: alternate-reverse;

Die Animation wird zuerst rückwärts abgespielt, dann vorwärts:

  • Beginnt beim letzten Schlüsselbild
  • Hält am ersten Schlüsselbild an
  • beginnt erneut, aber beim ersten Keyframe
  • Hält am letzten Keyframe an