keyframes-Animationen – Schlüsselbilder und weiche Übergänge

Wie funktionieren CSS-Keyframes-Animationen?

@keyframes-Animationen ähneln CSS transition, aber anders als CSS Transition setzen Keyframes eine Animationen automatisch und kontinuierlich in Kraft, und nicht als Reaktion auf eine Aktion des Benutzers wie ein Mausklick, ein Hovern der Maus oder ein Touch.

Jede Animation besteht aus zwei Schritten:

• der Definition der Animation in der @keyframes-Regel
• dem Aufruf der der keyframes-Regel im CSS-Selektor des HTML-Elements

.fly-in-section.visible {
  animation: flyIn 2s ease-out forwards;
}

@keyframes flyIn {
  from {
    opacity: 0;
    transform: translateX(-400px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Im einfachsten Fall entsteht eine Animation durch eine CSS keyframes-Regel mit zwei Keyframes. Die Keyframes definieren die CSS-Eigenschaften, zwischen denen die Animation einen weichen Übergang »tweent«. Mit dem Namen wird die Animation an einen oder mehrere Selektoren gebunden.

@keyframes-Regel – Liste von Zuständen

Keyframe-Animationen werden in der keyframes-Regel mit einer Liste von Zuständen ausgestattet und steuern den Ablauf mit duration (Dauer), delay (Verzögerung), iteration-count (Zahl von Durchläufen) und direction (vorwärts oder rückwärts).

@keyframes-Regeln sind Variablen, ähnlich wie Variablen einer Programmiersprache. Eine @keyframes-Regel kann mehreren Elementen mit unterschiedlichen Eigenschaften zugewiesen werden.

		
.packed .over {
	transform-origin: center;
	animation: vanish 1.4s ease-out forwards;
}

@keyframes vanish {
	from {
		transform: scale(0) rotate(90deg);
		opacity: 0;
	}
	to {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}

Ohne JavaScript gibt es nur wenige Ereignisse oder Aktionen, um eine Keyframes-Animation anzustoßen. In der einfachsten Variante laufen Keyframes-Animation ab, wenn die Seite geladen wird. Zwar kann ein Wert einen delay – Verzögerung – eingesetzt werden, aber dennoch kann nicht sichergestellt werden, dass der Benutzer die Animation zum richtigen Zeitpunkt zu Gesicht bekommt.

Eigenschaften von Keyframes-Animationen

animation-name

Name der Animation

animation-direction

Richtung der Animation (forwards, backwards, alternate)

animation-duration

Dauer der Animation (in Sekunden)

animation-delay

Verzögerung (in Sekunden), bevor die Animation startet. Bei zwei Zeitangaben ist die erste Zeit die Dauer der Animation, die zweite der Delay – die Verzögerung vor dem Start der Animation.

animation-fill-mode: forwards ist die Anweisung, die Eigenschaften der Animation nach dem Ablauf beizubehalten, damit das Elemente am Ende nicht auf den Anfangszustand zurückspringt.

animation-iteration-count

Anzahl der Wiederholungen der Animation

animation-play-state

gibt an, ob die Animation gerade abgespielt wird oder pausiert

animation-timing-function

Eine Kurve für das Bewegungsmuster der Animation (ease, ease-in, ease-in-out, linear, cubic-bezier(n,n,n,n), step-start, step-end, steps(int,start|end))

Die Eigenschaften der Keyframes-Animation werden ohne Komma in beliebiger Reihenfolge aufgeführt. Sie können einzeln mit ihrem Namen geschrieben werden oder in einer Kurzschrift.

.rolling {
	animation: rolling 5s 1s infinite alternate ease-in-out;
}

@keyframes rolling {
	from { transform: translate(0) }
	to   { transform: translate(calc(100% - 100px)) }
}

Am Rande: Anstelle von CSS transform: translate könnten auch top / right / bottom / left benutzt werden. Aber CSS translate ist – anders als left, top, right, bottom – Hardware-beschleunigt.

Animation mit animation-delay auslösen / verzögern

Das CSS Animations-Modul lässt sich nicht darüber aus, welche Ereignisse eine Animation starten, sondern legt nur fest, was in einer Animation passiert. Ohne weitere Angabe starten CSS-Animationen, wenn die Seite geladen wurde.

Weitere Auslöser für Animationen sind z.B. : checked, : hover, : active und : focus.

Manchmal braucht eine Animation aber nur eine Verzögerung für bestimmte Elemente, so z.B. eine einfache Slideshow mit CSS, bei der das zweite, dritte Bild mit einer Verzögerung angezeigt wird. animation-delay verzögert den Start der Animation um eine bestimmte Zeit.

Starten und Warten

<input type="checkbox" id="bluecarcheck">
<label for="bluecarcheck">Starten</label>
<div id="blue-car">
    <img src="bluecar.png" width="150" height="90">
</div>	

Die Animation wird durch einen Klick auf die Checkbox ausgelöst (#bluecarcheck:checked ~ #blue-car), startet aber erst mit einer Verzögerung von 2 Sekunden. Bei zwei Zeitangaben ist die erste Zeit (4s) die Dauer der Animation, die zweite (2s) die Verzögerung.

#blue-car { position: absolute;  }
#bluecarcheck:checked ~ #blue-car { 
   animation-name: Wait-And-Start;
   animation-duration: 4s;
   animation-delay: 2s; 
   animation-fill-mode: forwards;
}
@keyframes Wait-And-Start {
    from { transform: translateX(0) }
    to   { transform: translateX(200%) }
}

: hover war einst die beliebteste Methode, um die Animation beim Hovern mit der Maus zu starten, aber wir mussten schnell feststellen, dass die Touchscreens dabei nicht mitspielen.

Beispiel für das Starten der Animation über versteckte Radio-Buttons und den Pseudo-Selektor checked: CSS-Accordion ohne Javascript.

Javascript kann Animationen bei beliebigen Aktionen und Events starten und hat drei spezielle Ereignisse für CSS-Animationen: animationstart, animationend und animationiteration.

Erst das JavaScript Web Animation API bringt CSS-Animation bei, in Abhängigkeit von anderen Animationen weitere Aktionen zu starten.

@keyframes-Animationen vs CSS Transition

@keyframes-Animationen sind nicht einfach eine Weiterentwicklung von Transition. Sie unterliegen unterschiedlichen Steuerungen.

• CSS Transitions werden durch eine Benutzeraktion gestartet,
• @keyframes-Animationen durch einen Zustand (Seite wird geladen, Seite wird gescrollt, Element kommt in den Viewport).

animation-timeline: scroll()

Eine CSS-Animation ohne Javascript mit dem Scrollen der Seite zu synchronisieren – das soll die Eigenschaft animation-timeline bringen. Zurzeit ist animation-timeline: scroll() aber nur in Chrome implementiert.

@keyframes reveal {
  from { opacity: 0.5; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

animation-timeline wird von Chrome und von Safari unterstützt, aber noch nicht von Firefox. Bis es soweit ist, muss JavaScript eingreifen.

Intersection Observer: Animation starten, wenn sie in den Viewport kommt

Damit eine Animation erst startet, wenn der Benutzer weit genug gescrollt ist, muss Javascript eingesetzt werden. Der IntersectionObserver braucht nur wenige Zeilen.

var io = new IntersectionObserver ( (entry) => {
	document.querySelector(".crossing").classList.add("swimming");
}
io.observe (document.querySelector(".turtle"));

Der IntersectionObserver steht in allen modernen Browsern, nur IE11 (Rest in Peace) ist nicht dabei.