CSS Keyframe–Animationen

Keyframes Timeline

from / to erzeugt zwei Keyframes. Prozentangaben von 0% für den ersten Keyframe bis 100% für den letzten Keyframe anstelle von from und to steuern den zeitlichen Ablauf der Keyframes-Animation.

Keyframes setzen die Schlüsselpunkte, an denen sich der Ablauf der Animation ändert. Jede Keyframes-Animation kann beliebig viele Schlüsselpunkte festlegen.

.ring {
	animation: ringmove 5s forwards infinite linear
}

@keyframes ringmove {         
	0%   { transform: translate(0px,0px) rotate(0deg) }
	33%  { transform: translate(70px,50px) rotate(120deg) }
	66%  { transform: translate(140px,-50px) rotate(240deg) }
	100% { transform: translate(200px,0px) rotate(359deg) }
}

Mehrere Keyframes-Animationen für ein Element

Wenn die Animation eine Änderung erst ausführen soll, wenn eine Aktion beendet wurde, können dem Element mehrere Keyframes-Animationen zugewiesen werden. Die Keyframes-Animationen werden durch Kommas voneinander getrennt.

Hier bewegt sich das Element zuerst horizontal, legt eine Pause ein, und bewegt sich anschließend in eine andere Richtung. Die zweite Zeitangabe (delay) der zweiten Animation steuert den verzögerten Start, damit die Animation erst nach Ablauf der ersten Animation beginnt.

.ringDown {	
	animation: moveRight 3s forwards ease-in-out, 
	           moveDown 3s 4s forwards ease-in-out;
}

@keyframes moveRight {
	to {transform: translate(300px, 0) rotate(359deg);
		border-radius: 50%;
	}
}

@keyframes moveDown {
	0% {transform: translate(300px, 0);
		border-radius: 50%;
	}
	100% {transform: translate(300px, 100px);
		border-radius: 0px;
	}
}

CSS Slideshow mit Keyframes-Liste und animation-delay

Ein einzelner Keyframe kann mehrere Animationen enthalten. Mehrere Animationen werden durch Semikolons voneinander getrennt.

Die CSS-Slideshow enthält fünf Bilder. Jedes Bild wird 8 Sekunden anzeigt, dann entschwindet es innerhalb von 2 Sekunden und rutscht gleichzeitig aus dem Ausschnitt. So entsteht ein Takt von 10 Sekunden pro Bild. Die gesamte Animation beträgt 50 Sekunden.

Weil die CSS-Eigenschaft animation-delay nur eine Verzögerung vor dem ersten Start bewirkt, werden die Bilder zwischen ihren Animationen durch @keyframes fade ausgeblendet.

Die Animation des ersten Bildes beginnt sofort, die Animation des zweiten Bilds beginnt mit einer Verzögerung von 10 Sekunden, das dritte mit einer Verzögerung von von 20 Sekunden usw..

Und warum ist es das sechste Bild im CSS? Na, weil die img-Elemente der Slideshow absolut innerhalb eines relativ positionierten Blocks liegen. Und da werden die Letzten eben bei den Ersten sein.

.slides img:nth-child(1) {animation: fade 50s 40s infinite ease-in;}
.slides img:nth-child(2) {animation: fade 50s 30s infinite ease-in;}
.slides img:nth-child(3) {animation: fade 50s 20s infinite ease-in;}
.slides img:nth-child(4) {animation: fade 50s 10s infinite ease-in;}
.slides img:nth-child(5) {animation: fade 50s infinite ease-in;}

@keyframes fade {
	0%   { opacity: 1; width: 100%; }
	20%  { opacity: 1; width: 100%; }   /** anzeigen für 1/5 der Gesamtdauer der Animation
	22%  { opacity: 0; width: 110%; }   /** 4/5 der Gesamtdauer nicht sichtbar
	99%  { opacity: 0; width: 100%; }
	100% { opacity: 1; width: 100%; }
}

Wer noch Flash-Animationen oder Dreamweaver als Entwickler kennengelernt hat, erinnert sich vielleicht noch an die Timeline oder Zeitleiste, die den Ablauf der Animation bestimmte. Für CSS-Animationen gibt es ein derartiges Tool nicht, da müssen wir die Timeline selber aufzeichnen.

KeyFrames und Duration – flexible Ausführungszeit

CSS kann keine KeyFrames-Animation starten, wenn eine andere KeyFrames-Animation abgelaufen ist. Wir müssen die Zeiten über eine Zeitleiste für alle Elemente festlegen, was bei komplexen Animationen für mehrere Elemente einen großen Aufwand darstellt.

Immerhin: Um Änderungen am zeitlichen Ablauf eines KeyFrames-Animation einzubauen, kann CSS zusätzlich Variablen (Custom Properties) und die calc-Funktion nutzen.

:root {
	--duration: 1000ms;
}

.box {
	width: 100px;
	height: 100px;
	background: cornflowerblue;
	animation: moveRight var(--duration) forwards ease-in-out, 
	           moveDown var(--duration) calc(var(--duration) * 1.5) forwards ease-in-out;
}

will-change

will-change informiert den Browser, welche Eigenschaften eines Elements durch eine Animation verändert werden könnten. So kann sich der Browser besser auf Änderungen vorbereiten und u.U. eine schneller anlaufende und weichere Animation liefern.

Die folgenden Werte stehen zur Verfügung:

auto

fordert die standardgemäße Optimierung des Browsers an.

scroll-position

Informiert den Browser, dass die Scrollposition eines Elements animiert werden kann, damit der Browser sich besser auf einen aktuell noch nicht sichtbaren Bereich einrichten kann.

contents

Der Inhalt eines Elements kann durch eine Animation geändert werden – der Browser soll den Inhalt nicht in den Cache aufnehmen.

<custom-ident>

Benutzerdefinierte Eigenschaft wie background-color oder opacity, für die eine Animation auf dem Plan steht.