Animation Direction, Fill Mode

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.

<div class="frame">
	<img id="simpleball" src="ball.png" alt="CSS Keyframe Animation »Rollender Ball«">
</div>

.frame{
	position:relative;
	width:320px;  
}

#simpleball { 
	position: absolute;
}

.simpleanimate {
	animation: simpleball 8s;
}

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

Hier sorgt JavaScript dafür, dass die Animation anläuft, wenn sie »in den View« kommt – im Browserfenster sichtbar wird: Der Intersection Observer weist dem Ball die Klasse simpleanimate erst zu, wenn der Ball den sichtbaren Ausschnitt des Browserfensters erreicht..

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

Start zurück

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

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

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

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

CSS-Animationen steuern

@keyframes

Definiert die Animation

from - to

Zustand beim Start und beim letzten Keyframe der Animation

0% - 100%

Liste von Einzelschritten

animation

Steuert die Animation und ist Kurzregel für alle Eigenschaften – außer der animation-play-state–Eigenschaft.

animation-name

Name der @keyframes-Animation

animation-duration

Dauer eines Animations-Zyklus in Millisekunden

animation-timing-function

Verteilung der Geschwindigkeit über die Dauer eines Animations-Zyklus. Vorgabe ist ease

animation-delay

Verzögerung, mit der Animation startet. Vorgabe ist 0.

animation-iteration-count

Wie oft die Animation abgespielt wird. Vorgabe ist »1«.

animation-direction

Spielt die Animation wahlweise vorwärts, rückwärts oder alternierend ab. Vorgabe ist »normal«.

animation-play-state

Ob 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;