CSS, HTML und Javascript mit {stil}

CSS Animationen mit Keyframes

Beispiel für Keyframe-Animationen mit CSS

CSS ist das Grundgerüst für wirkungsvolle Effekte und Animationen. Die CSS-keyframes-Regel setzt Animationen von einer CSS-Eigenschaft zur nächsten über mehrere Schritte oder Iterationen zusammen. Animationen mit CSS Keyframes sind einfach und obendrein performant. Vor allem mit Handy und Tablet laden CSS-Animation schnell und laufen ohne Ruckeln an.

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, bei denen eine Animation gestartet werden kann (beim Laden der Seie, :hover, :focus, :active).

An dieser Stelle muss Javascript mit Animation-Events, querySelector und classList einspringen.

Einfache CSS-Animationen funktionieren aber auch responsive 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 pano
.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: 600px; height: 136px;}
   .pano img { width: 600px; height: 136px }
}

Der Weg der CSS-Animation

CSS-keyframe-Animationen kamen genau zur richtigen Zeit. Die Zeit für animierte GIF-Bilder läuft seit Jahren ab, PNG hat sich den Animationen immer verweigert. Flash starb mit dem Auftritt von HTM5 und CSS3.

  • Animiertes GIF lässt sich nicht scripten, lässt keine Effekte zu und ist alles andere als kompakt.
  • Javascript Animationen mit requestAnimationFrame sind kompakt, effizient und interagieren mit dem Benutzer.
  • SVG hat ein eigenes Animationsmodel, das von IE und Edge nicht unterstützt wird und von den Blink-Entwicklern (Chrome) in die Ecke gestellt wird.
  • Animationen mit HTML canvas und Javascript sind mächtig und gar nicht intuitiv.
  • Animationen mit CSS und Javascript – mit oder ohne jQuery – sind effizient und Web-nativ. So ziemlich alles, was sich stylen lässt, lässt sich auch animieren.
Keyframe-Animationen