Beispiele: CSS Animationen mit Keyframes

Beispiele für CSS Keyframes-Animationen: Die keyframes-Regel ändert CSS-Eigenschaften über mehrere Schritte oder Iterationen und ist das Grundgerüst für Effekte und Animationen. Animationen mit CSS Keyframes sind einfach und obendrein performant. Vor allem mit Handy und Tablet sind CSS-Animation schnell geladen und laufen ohne Ruckeln an.

Beispiel für CSS Keyframe Animation als endlos laufendes Panorama

Es geht auch ohne Javascript

Keyframes-Animationen mit CSS ersparen viele Zeilen Javascript, auch wenn sie engeren Grenzen als Animationen mit Javascript unterliegen.

Viele CSS-Animationen werden um Javascript nicht herum kommen. CSS kennt nur wenige Events, die eine Animation starten (beim Laden der Seite, :hover, :focus, :active), aber :hover, die Reaktion auf Aktionen des Benutzers, wird auf mobilen Geräten nicht in gleicher Weise behandlet wie auf dem Desktop-Monitor. An dieser Stelle muss Javascript mit dem Web Animation API einspringen.

Einfache CSS-Animationen funktionieren aber auch responsiv und komplett ohne Javascript.

Hintergrund Landschaft für ein Panorama Hintergrund Landschaft für ein Panorama Hintergrund Sterne Hintergrund Sterne animation mond animation qualm animation lokomotive

HTML für animierte Bilder

Die Animation in diesem Beispiel läuft endlos und beginnt mit dem Laden der Seite. Sie braucht kein hover oder Javascript. Aber die Animation vermittelt eine Vorstellung, wie einfach der Einsatz von Animationen mit CSS ist.

<div class="winterframe">
   <img class="landschaft1" src="landschaft.png"  alt="" width="600" height="329" />
   <img class="landschaft2" src="landschaft.png"  alt="" width="600" height="329" />
   <img class="sterne1"     src="sterne.png"      alt="" width="587" height="195">
   <img class="sterne2"     src="sterne.png"      alt="" width="587" height="195">
   <img class="mond"        src="mond.png"        alt="" width="120" height="120" />
   <img class="qualm"       src="qualm.png"       alt="" width="199" height="59" />
   <img class="loko"        src="loko.png"        alt="" width="220" height="92" />
</div>

Das div-Element winterframe ist relativ positioniert, um die einzelnen Elemente der Animation absolut zu positionieren.

.winterframe { 
   position: relative; width: 300px; height: 165px; 
}
.winterframe img { 
   position: absolute; 
}

Die Hügellandschaft landschaft1 / landschaft2 ist jeweils dasselbe Bild an derselben Position. Wenn die Animation anläuft, bilden die beiden Bilder einen endlosen laufenden Hintergrund. Die beiden Bilder mit den Sternen benutzen dasselbe Prinzip.

Sterne, Mond und Qualm

Mond, Qualm und Lokomotive sind absolut positioniert und ihre Größe ist in %-Werten notiert.

.mond { 
   width: 30%; height: auto; 
   animation: mond 30s infinite reverse linear; 
}
.loko { 
   width: 40%; height: auto; bottom: 10px; right: 40%; 
   animation: loko 30s linear
}
.qualm { 
   width: 40%; height: auto; bottom: 60px; right: 50%; 
   animation: qualm 8s infinite
}

Die Animation der Schneelandschaft

Die Landschaft ist das Hintergrundbild des Gesamtbildes und hat zwei Keyframes mit from und to. Die Hintergrundposition wird in jedem Animationsschritt einmal um ihre Breite verschoben. Das war's schon.

.landschaft1 { width: 300px; height: 165px; animation: loop1 18s infinite reverse linear;}
.landschaft2 { width: 300px; height: 165px; animation: loop2 18s infinite reverse linear;}

.sterne1 { width: 300px; height: 100px;  animation: loop1 60s infinite reverse linear;}
.sterne2 { width: 300px; height: 100px;  animation: loop2 60s infinite reverse linear;}

.landschaft1 und .landschaft 2 unterscheiden sich nur durch die Animation loop1 und loop2. Dasselbe Prinzip gilt für .sterne1 und sterne2. Die Sterne laufen nur langsamer durch das Bild, ansonsten benutzen sie dieselben Keyframes wie die Landschaft.

@keyframes loop1 {
   from { left: -100% }
   to { left: 0px }
}

@keyframes loop2 {
   from { left: 0px }
   to { left: 100% }
}

Die Animation der Qualmwölkchen

Der Qualm ist ein kleines Bild mit Wölkchen, absolut positioniert und hat nur die beiden Keyframes from und to, die das Bild von rechts nach links bewegen. Der Mond wandert von rechts nach links und wird dabei kleiner.

@keyframes qualm {
   from {transform:translate(0,0)}
   to {transform:translate(-200px,-100px)}
}

@keyframes mond {
   from { transform: translate(-60%) scale(0.7)}
   to { transform: translate(300%)}
}

Amination mit mehr als zwei Keyframes

Die Lok bleibt zwar in der Mitte des Bildes stehen, aber sie rotiert leicht, um den Eindruck einer Fahrt die Hügel rauf, die Hügel runter zu erzeugen.

@keyframes loko {
   25% {transform:rotate(5deg)}
   50% {transform:rotate(-5deg)}
   75% {transform:rotate(5deg)}
   100% {transform:rotate(0deg)}
}

Die Größe der Lokomotive ist als 36% notiert. So behält die Lok ihre relative Größe in allen Breakpoints.

Wenn man genau hinsieht, entdeckt man, dass die Qualmwölkchen der Lokomotive und der Mond außerhalb des border-radius sichtbar sind: Animierte Elemente werden aus dem Fluss und aus der Position genommen und legen sich über alle anderen Elemente.

Responsive CSS keyframes-Animationen

Animationen sind individuell, die Eigenschaften, die eine Animation responsive machen, unterschiedlich. Diese Animation wächst nicht übergangslos mit dem Platz im Browserfenster, sondern hat drei Größen mit zwei Breakpoints.

@media (min-width:480px) {
   .pano { width: 450px; height: 102px; }
   .pano img { width: 450px; height: 102px }
}

@media (min-width:980px) {
   .pano { width: 600px; height: 136px; }
   .pano img { width: 600px; height: 136px }
}

Weil Lokomotive, Qualm und Mond bereits relativ in % angegeben sind, brauche sie keine weiteren Eigenschaften für die beiden Breakpoints.

Wenn die kleinen Lücken von Internet Explorer unter den Teppich gekehrt werden sollen, dürfen @keyframes-Regeln nicht in Media Queries gesetzt werden. Internet Explorer unterstützt CSS Keyframes zwar schon in IE 10, aber IE10 und IE11 ignorieren @keyframes in Media Queries.

Download Demo Keyframes-Animation

Endlos laufender Hintergrund – Panorama

Für das endlos laufende responsive Panorama wird nicht einmal Javascript benötigt.

.pano { position: relative; width: 300px; height: 68px; overflow: hidden; margin: 1em auto}

.pano img {position:absolute; width: 300px; height: 68px }
.pano img.img1 {  animation: loop1 18s infinite reverse linear; }
.pano img.img2 {  animation: loop2 18s infinite reverse linear; }

@keyframes loop1 {
   from { left: -100%; }
   to { left: 0px; }
}

@keyframes loop2 {
   from { left: 0px; }
   to { left: 100%; }
}
	
@media (min-width:480px) {
   .pano { width: 450px; height: 102px; }
   .pano img { width: 450px; height: 102px }
}

@media (min-width:980px) {
   .pano { width: 900px; height: 204px;}
   .pano img { width: 900px; height: 204px }
}

@media (min-width:1580px) {
   .pano { width: 1200px; height: 272px;}
   .pano img { width: 1200px; height: 272px }
}
pano pano

Der Weg der CSS-Animation

Heute stehen wir vor einer großen Auswahl an Animationstechniken – von CSS Keyframes über Javascript animate () bis hin zu SMIL-Animationen für SVG.

Suchen auf mediaevent.de