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 Seie, :hover, :focus, :active). An dieser Stelle muss Javascript mit dem Web Animation API einspringen.
Einfache CSS-Animationen funktionieren aber auch responsiv und komplett ohne Javascript.
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.
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 }
}
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.
- Javascript animate() Web Animation API lehnt sich an die CSS-Keyframes-Animationen an und eignet sich für die Animation und Ablaufsteuerung komplexer Objekte.
- Javascript Animationen mit requestAnimationFrame sind kompakt, effizient und eignen sich für canvas-Animationen.
- SVG hat mit SMIL ein eigenes Animationsmodel, das von den Blink-Entwicklern (Chrome) in die Ecke gestellt wurde (aber immer noch von allen Browsern unterstützt wird).