Animation Direction, Fill Mode

animation-direction und animation fill-mode

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Ablauf von Keyframes-Animationen

Ohne besondere Vorgaben starten CSS-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. 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

Hier sorgt Javascript dafür, dass die Animation erst anläuft, wenn sie »in den View« kommt – im Browserfenster sichtbar wird: Intersection Observer.

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).

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 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) }
}

Easing – animation-timing-function

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

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;