Animation Direction, Fill Mode

animation-direction und animation fill-mode, Animationen am Ende anhalten und Eigenchaften beibehalten

animation-fill-mode und animation-direction steuern das Abspielen von CSS-Animationen und legen fest, ob die Animation am Ende zurückspringt oder mit den Eigenschaften des letzten Keyframes endet.

Ohne besondere Vorgaben starten Animationen beim Laden der Seite und spulen ihr Programm ab. Am Ende versetzt die Keyframes-Animation das Element unverzüglich ohne weichen Übergang zurück auf die anfänglichen Eigenschaften.

Ablauf von Keyframes-Animationen

Wenn die Animation nicht gerade oben am Anfang der Seite abläuft, bekommt der Benutzer die Bewegung vielleicht gar nicht mehr zu Gesicht, selbst wenn sie so langsam abläuft wie in diesem Beispiel. Eine Verzögerung durch animation-delay ist schwer bis gar nicht kalkulierbar.

CSS Keyframe Animation Rollender Ball

Animation fill mode

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

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
CSS Keyframe Animation Rollender Ball
HTML
<div class="frame">
   <input type="radio" name="startstop" id="fillmode" style="display:none">
   <input type="radio" name="startstop" id="goback" style="display:none">
   <label for="fillmode">Start</label>
   <label for="goback">zurück</label>
   <img id="stoppedBall" class="play" src="ball.png" alt="…" />
</div>

Die Animation wird durch zwei Radio-Buttons gestartet und zurückgesetzt. Der Ball ist mit animation-fill-mode:forwards definiert und die das animierte Element bleibt am Ende der Animation stehen – die Animation friert ein.

CSS
#fillmode:checked ~ .play {
   animation-name: stoppedBall; 
   animation-duration: 5s;
   animation-fill-mode:forwards;
}

@keyframes stoppedBall {
   from  { transform: translateX(0)     rotate(0deg) }
   to    { transform: translateX(240px) rotate(360deg) }
}

#fillmode:checked ~ .play nutzt den indirekten-Nachbarn-Selektor: Das label-Element dient als Button und toggelt zwischen den Zuständen.

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 vorwärts und rückwärts abspielen
HTML
<img id="forthAndBack" src="ball.png" alt="vorwärts und zurück">

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 (im Beispiel infinite) sein.

CSS
#forthAndBack {
   width:70px; height: 70px;bottom: 0; left:0; position: absolute;	
   animation: forthAndBack alternate infinite 4s;
}

@keyframes forthAndBack {
   from  { transform: translateX(0)     rotate(0deg) }
   to    { transform: translateX(240px) rotate(360deg) }
}

@media (min-width: 680px) {
   @keyframes forthAndBack {
      from  { transform: translateX(0)     rotate(0deg) }
      to    { transform: translateX(400px) rotate(720deg) }
}

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;