CSS Keyframe–Animationen

CSS keyframes

Keyframe-Animationen können mehr als eine Eigenschaft ändern, z.B. die Position, Farbe und Größe eines Elements in einem Ablauf steuern. Mit Prozent-Angaben entsteht eine Timeline oder Zeitleiste.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

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.

Der Animation-Delay sorgt für den verzögerten Start der einzelnen Animationen.

Slideshow Fischerkahn Slideshow Kahn Slideshow Laterne Slideshow Obst Slideshow Ruhrort

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%; }
	18%  {  opacity: 1;  width: 100%; }
	20%  {  opacity: 0;  width: 105%; }
	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.

Grafik einer Zeitleiste oder Timeline
ROT: Slide aktiv, GRÜN: Herausfliegen, BLAU: Slide nicht sichtbar

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.