#animation Kurzschreibweise für animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode und animation-play-state. Nur animation-duration und animation-name sind erforderlich.
#animation-duration Legt fest, wie lange die Animation dauert. default animation-duration: 0s; Der Standardwert ist Null Sekunden: die Animation wird einfach nicht abgespielt. Hello World animation-duration: 1.2s; Sie können dezimale Werte in Sekunden mit dem Schlüsselwort s verwenden.…
#animation-delay Legt fest, wie lange die Animation warten muss, bevor sie startet. Die Animation wird nur bei ihrer ersten Wiederholung verzögert. default animation-delay: 0s; Die Animation wird null Sekunden warten, also sofort starten. Hello World animation-delay: 1.2s;…
#animation-iteration-count Legt fest, wie oft die Animation abgespielt wird. default animation-iteration-count: 1; Die Animation wird nur einmal abgespielt. Hello World animation-iteration-count: 2; Sie können ganzzahlige Werte verwenden, um eine bestimmte Anzahl von Wiederholungen der Animation zu definieren.…
#animation-timing-function Legt fest, wie die Werte zwischen dem Start und dem Ende der Animation berechnet werden. default animation-timing-function: ease; Die Animation beginnt langsam, beschleunigt sich in der Mitte und verlangsamt sich am Ende. Hello World animation-timing-function: ease-in;…
#animation-play-state Legt fest, ob eine Animation abgespielt wird oder nicht. default animation-play-state: running; Wenn die Animationsdauer und der Animationsname definiert sind, wird die Animation automatisch abgespielt. Hello World animation-play-state: paused; Die Animation wird am ersten Schlüsselbild angehalten.…
#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. Hello World animation-direction: reverse; Die Animation wird rückwärts…
#animation-fill-mode Legt fest, was vor dem Beginn und nach dem Ende einer Animation geschieht. Der Füllmodus erlaubt es, dem Browser mitzuteilen, ob die Stile der Animation auch außerhalb der Animation angewendet werden sollen. default animation-fill-mode: none; Die…
#animation-name Legt fest, welche Animations-Keyframes verwendet werden sollen. default animation-name: none; Wenn kein Animationsname angegeben ist, wird keine Animation abgespielt. Hello World animation-name: fadeIn; Wenn ein Name angegeben wird, werden die Keyframes verwendet, die diesem Namen entsprechen.…