CSS, HTML und Javascript mit {stil}

Animation Play State, Direction, Fill Mode

CSS Keyframe-Animationen steuern

animation-play-state, animation-fill-mode und animation-direction steuern das Abspielen von CSS-Animationen.

Ohne weitere Angaben setzt die Keyframes-Animation das Element am Ende unverzüglich ohne weichen Übergang zurück auf die anfänglichen Eigenschaften.

CSS Keyframe-Animation: Rollender Ball

Der Flip zurück auf die ursprünglichen Eigenschaften entsteht auch, wenn die Animation nicht durch ein Javascript getriggert wird. Der Sprung zurück ist die Voreinstellung.

Animation fill mode

animation-fill-mode legt fest, ob die Animation am Ende zurückspringt (backwards – default) oder mit den Eigenschaften des letzten Keyframes endet (forwards).

#ball {
    animation-name: ball; 
    animation-duration: 5s;
}

@keyframes ball {
    from  { transform: translateX(0)     rotate(0deg) }
    to    { transform: translateX(500px) rotate(720deg) }
}
animation-fill-mode
none zurück zum initialen Zustand am Ende der Animation
backwards bleibt beim ersten Keyframes stehen
wendet die Eigenschaften vor dem ersten Keyframe an
forwards bleibt beim letzten Keyframes stehen
wendet die Eigenschaften nach dem letzten Keyframe an
both bleibt beim letzten Keyframe stehen
wendet das CSS vor dem ersten und nach dem letzten Keyframe an
backwardsEigenschaften vor demersten Keyframebothwendet die Eigenschaftenvor dem Start und am Endeder Animation anforwardsEigenschaften nach demletzen Keyframe
CSS Keyframe Animation Rollender Ball
#stoppedBall {
    animation-name: ball; 
    animation-duration: 5s;
    animation-fill-mode:forwards;
}

Die Animation nutzt dieselbe keyframes-Regel wie das vorangegangene Beispiel, aber der Ball ist jetzt mit animation-fill-mode:forwards definiert.

CSS animation direction

direction bestimmt, in welcher Reihenfolge die Keyframes einer Animation ausgeführt werden.

animation direction
normalvom ersten Keyframe zum letzten Keyframe
reversevom letzten Keyframe bis zum ersten Keyframe
alternateändert die Richtung bei jeder Iteration der Animation
alternate-reversewie zuvor, aber beginnt beim letzten Keyframe
CSS Animation: Rollender Ball CSS Animation: Rollender Ball
#backAndForth, 
#forthAndBack { 
   position: absolute; 
   width:20%; 
   bottom: 5px
}
#backAndForth { 
   animation: ball 4s alternate forwards; 
   animation-iteration-count: 2;
   animation-play-state: paused;
}
#forthAndBack { 
   animation: ball 4s alternate-reverse forwards; 
   animation-iteration-count: 2;
   animation-play-state: paused;
}

Die Animation nutzt wieder @keyframes ball wie die vorangegangenen Beispiele. Damit die Richtung durch animation-direction: alternate geändert wird, muss animation-iteration-count größer als 1 sein.

Animation easing – timing-function

Damit Animationen natürlich wirken, dürfen sie nicht plötzlich anspringen und nicht von einem auf den nächsten Augenblick enden. Natürliche Bewegungen beginnen mit einer kleinen Verzögerung, der Anlauf braucht Kraft, dann kommt die Bewegung in Fahrt. Am Ende verlangsamt sich eine Bewegung meist kurz bevor sie endgültig stopt. Das gilt für die Lokomotive im Beispiel oben, für einen laufenden Menschen und genauso für animierte Elemente der Navigation.

Abruppte Bewegungen wie der Wechsel von einer Farbe auf die nächste beim hovern über einen Button empfinden wir als mechanisch oder künstlich.

Die 12 Prinzipien der Animation

Animationen mit CSS bringen die Eigenschaft »timing« mit, die für organische Bewegungen der animierten Objekte sorgt.

easeVorgabe, start etwas langsam, beschleunigt, bremst ab
linearKonstante Geschwindigkeit über die gesamte Animation, wirkt mechanisch
ease-instartet langsam und beschleunigt gegen Ende der Animation
ease-outstartet schnell und bremst gegen Ende der Animation
ease-in-outstartet langsam, beschleunigt in der Mitte der Animation und bremst wieder gegen Ende der Animation, ähnlich wie ease, aber dramatischer.

Mehr zu easing

Bezier-Curves

Ceaser CSS EASING ANIMATION TOOL

CSS-Animationen steuern

@keyframesDefiniert die Animation
from - toZustand beim Start und beim letzten Keyframe der Animation
0% - 100%Liste von Einzelschritten
animationSteuert die Animation
animationKurzregel für alle Eigenschaften – außer der animation-play-state–Eigenschaft – der Animation
animation-nameName der @keyframes-Animation
animation-durationDauer eines Animations-Zyklus in Millisekunden
animation-timing-functionVerteilung der Geschwindigkeit über die Dauer eines Animations-Zyklus. Vorgabe ist ease
animation-delayVerzögerung, mit der Animation startet. Vorgabe ist 0.
animation-iteration-countWie oft die Animation abgespielt wird. Vorgabe ist »1«.
animation-directionSpielt die Animation wahlweise vorwärts, rückwärts oder alternierend ab. Vorgabe ist »normal«.
animation-play-stateOb die Animation läuft oder pausiert. Vorgabe ist »running«.

Kurzschrift

Bis auf animation-play-state fasst die Kurzschrift animation alle Eigenschaften einer Animation zusammen. Wenn zwei Zeitangaben in der Kurzschrift stehen, wird die erste Zeit als Dauer der Animation und die zweite Zeitangabe als animation-delay aufgefasst.

animation: ball 4s 2 1s alternate-reverse;
animation-play-state:running;