Animation Play State – Pausieren und neu starten

Animation mit Mausklick / Touch starten

Auch wenn für das Erkennen einer Benutzeraktion meist Javascript zuständig ist, lassen sich einfache Animationen auch einfach mit CSS starten und pausieren.

Damit eine Animation nicht schon beim Laden der Seite startet, sondern erst durch einen Klick, oder wenn die Animation in den sichtbaren Fensterausschnitt kommt, brauchen wir Events – Ereignisse. Das Hovern mit der Maus war DAS Event für CSS, aber :hover ist ein Problemfall für Touchscreens. Stattdessen wird die Animation in diesem Beispiel ohne Javascript durch das Aktivieren einer Checkbox gestartet.

Start

<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"  />

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

<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";
}

.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

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;