Animation Play State – Pausieren

CSS Keyframe-Animationen steuern

animation-play-state, animation-fill-mode und animation-direction steuern das Abspielen von CSS-Animationen und legen z.B. 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.

Animation beim Laden der Seite nicht starten

Damit die Animation nicht schon beim Laden der Seite startet, sondern erst durch einen Klick auf einen Button, das Hovern der Maus oder wenn das animierte Element in den sichtbaren Fensterausschnitt gescrollt wird, muss die Animation an ein Event gekoppelt werden.

Das Schöne beim Hovern mit der Maus war, dass Javascript außen vor bleiben konnte, aber :hover ist ein Problemfall für Touchscreens. Stattdessen wird die Animation in diesem Beispiel ohne Javascript durch das Aktivieren einer Checkbox gestartet.

CSS Keyframe-Animation: Rollender Ball
HTML
<input type="checkbox" id="start" style="display:none"/>
<label for="start" class="start">Start</label>
<img id="ball" class="play" class="restart" src="ball.png" alt="Rollen"  />
CSS
#ball { position:absolute; }

/** Erst starten, wenn der Button geklickt wird **/
#start:checked ~ .play { animation:ball 3s; }

@keyframes ball{
   from { transform: translate(0) rotate(0deg); } 
   to   { transform: translate(250px) rotate(720deg); }
}

Der Flip zurück auf die ursprünglichen Eigenschaften des animierten Elements entsteht auch, wenn die Animation nicht durch ein Event wie den Klick auf den Button getriggert wird. Der Sprung zurück ist die Voreinstellung.

Animation pausieren

Wenn die Animation pausiert, führt sie ihre Aktionen an dem Punkt fort, an dem sie in die Pause versetzt wurde.

HTML für den hüpfenden Wasserball
<div class="container">
   <input type="checkbox" id="jump">
   <label for="jump">Pause</label>
  <div class="element" id="element"></div>
</div>

Anstelle von Javascript versetzt input checkbox das Element in den Pausenzustand. Ein label-Tag mit dem passenden for-Attribut hat denselben Effekt wie das input-Element selber. Also wird input#jump versteckt und label als Button markiert.

input#jump { 
   display: none;
}

label[for="jump"] {
   border: 1px solid cyan; 
}

#jump:checked ~ label[for="jump"]::after {
   content: " und weiter";
}
CSS für die Keyframes-Animation
.element {
   background-image: url(wasserball.png); 
   position: relative;
   animation: bounce 2s infinite;
}

@keyframes bounce {
   from { top: 150px; animation-timing-function: ease-out; }
    25% { top: 50px;  animation-timing-function: ease-in; }
    50% { top: 200px; animation-timing-function: ease-out; }
    75% { top: 75px; animation-timing-function: ease-in; }
     to { top: 150px; }
}

animation-play-state hat zwei Zustände: running und paused. Ohne weitere Vorgaben starten Animationen automatisch beim Laden der Seite.

#jump:checked ~ .element {
   animation-play-state: paused;
}

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;