CSS3-Animationen mit und ohne JavaScript

Inhaltsverzeichnis

Moderne Web-Applikationen setzen vermehrt auf Animationen. Dank CSS3 und entsprechender Frameworks wie Animate.css und Magic lassen sie sich mittlerweile vergleichsweise einfach umsetzen und das häufig sogar völlig ohne JavaScript.

Animationen können – wenn man sie an den richtigen Stellen und vor allem sparsam einsetzt – den Mehrwert einer Webseite durchaus erhöhen. Ein typisches Beispiel dafür stellt die Animation von Social- Media-Buttons dar. Interessant sind CSS3-Animationen aber unter anderem auch für Portfolio- Präsentationen.

Bislang musste man für sie auf JavaScript zurückgreifen. Frameworks wie jQuery erleichtern hier zwar mittlerweile die Arbeit, dennoch bleiben die Probleme bestehen, die es im Zusammenhang mit JavaScript gibt. (Exemplarisch seien dabei die Benutzer genannt, die in ihren Browsern JavaScript deaktiviert haben.) CSS3 verspricht mit dem Arbeitsentwurf CSS Animations Abhilfe.

Animationen bestehen in CSS immer aus zwei Elementen: einem Stil, über den die Animation beschrieben wird, und einem Set von Keyframes. Über letzteres kann der Nutzer Start, Zwischenpositionen und Ende des gewünschten Effekts bestimmt. Der große Vorteil der CSS-Animationen ist dabei zweifellos ihre gute Performance, die vor allem im Vergleich mit durch Skripte umgesetzten Animationen deutlich wird.

@keyframes fade-in {
   0% {opacity: 0}
   100% {opacity: 1}
}
a {
   animation: fade-in 1s;
}

Ein Wort zum Browser-Support: Animationen lassen sich in aktuellen Browsern nutzen. Lediglich der Internet Explorer bis einschließlich Version 9 streikt. Damit Animationen in möglichst vielen Browsern laufen, sind die bekannten Präfixe zu verwenden.

div {
   width: 100px;
   height: 100px;
   background: red;
   -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
   animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
   from {background: red;}
   to {background: yellow;}
}
/* Standard-Syntax */
@keyframes myfirst {
   from {background: red;}
   to {background: yellow;}
}

Der Einsatz der Präfixe bedeutet für Entwickler einen nicht unerheblichen Mehraufwand, außerdem bläht er die CSS-Syntax auf und macht sie unübersichtlich. Abhilfe kann das 2 KByte große Skript -prefix-free schaffen. Es überprüft die mit link oder style eingebundenen Stylesheets und fügt die benötigten Präfixe automatisch hinzu. -prefix-free funktioniert mit Internet Explorer ab Version 9, Opera 10+, Firefox 3.5+, Safari 4+ und Chrome.

Aber Achtung: Vor dem Einsatz des Skripts sind in jedem Fall auch dessen Nachteile zu berücksichtigen. So dauert es eine Weile, bis -prefix-free die Stylesheets durchlaufen hat. Anschließend wird der Browser angewiesen, das von ihm bereits verarbeitete Stylesheet neu zu rendern. Das führt zu Verzögerungen, die durchaus negativ auffallen (können). Es ist daher unbedingt zu prüfen, wie nachteilig die Auswirkungen auf das eigene Projekt sind. Gerade während der Entwicklungsphase und im Testbetrieb leistet das Skript jedoch gute Dienste. Um -prefix-free einzusetzen, ist lediglich die heruntergeladene Skript-Datei einzubinden.

Bewegung mit Animate.css

Will man Animationen mit CSS umsetzen, stellt sich immer die Frage des Aufwands. Um ihn so gering wie möglich zu halten, eignen sich entsprechende Frameworks, die die Definition von CSS-Animationen erleichtern. Eines der bekanntesten Animations-Frameworks ist derzeit Animate.css, das ausschließlich auf CSS setzt. (Wobei bereits an dieser Stelle darauf hingewiesen werden muss, dass man Animate.css in Kombination mit JavaScript nutzen kann. Mehr dazu im Anschluss.)

Das Framework wird unter der MIT-Lizenz angeboten und lässt sich kostenlos verwenden. Mit 71 KByte ist es zwar nicht eben klein, aber durchaus noch im Rahmen. Zudem gibt es eine minimierte Variante von 56 KByte Größe.