CSS versus Javascript

06.10.2016
Animationen im Web: Wann empfiehlt sich dafür CSS, wann Javascript? Wir nennen Unterschiede und geben Tipps.

Animierte Elemente im Webdesign lassen sich sowohl mit CSS als auch mit Javascript umsetzen. Nicht immer funktioniert jedoch jede Variante problemlos, zudem ist das Prinzip unterschiedlich: CSS-Animationen werden vom Browser gesteuert, Javascript-Animationen dagegen nicht. Welche Vor- und Nachteile bringt das?

Animiertes Webdesign

Beim Erstellen von Animationen gibt es zwei verschiedene Wege. Quelle: Viktor Mildenberger / Pixelio.de

Technische Möglichkeiten wachsen und mit ihnen die Ansprüche an modernes Webdesign. Statische Webseiten werden häufiger von solchen mit Animationen abgelöst. Hier lässt sich Kreativität ausspielen. Auch der aktuelle Trend „Storytelling“ kann mit Hilfe von Animationen unterstützt werden. Websurfer mögen es, wenn sie Entscheidungen treffen und durch den Klick auf verschiedene Elemente Aktionen auslösen können. Bei der Umsetzung stehen zwei Varianten zur Verfügung: CSS und Javascript.

CSS-Animationen

Animationen die mit CSS realisiert werden, kommen ohne Plug-ins oder Javascript-Know-how aus. Sie lassen sich einfacher umsetzen und werden vom Browser gesteuert. Das bedeutet, dass Frequenzen automatisch geregelt werden können und die Animationen stabiler abrufen. Nutzt man CSS3 für das Animieren im Webdesign, muss man bei einigen Browsern dennoch vorsichtig sein. Probleme können beim Internet Explorer in den Versionen 8 und 9 sowie bei Opera Mini auftauchen. CSS-Animationen erfordern außerdem viel Code.

Die Pluspunkte von Javascript

Javascript bietet mehr Möglichkeiten, dynamische Effekte zu erstellen, als CSS das kann. Zudem verzeiht Javascript dem Benutzer eher Fehler, denn Effekte können zeitverzögert ablaufen. Das funktioniert über den Befehl „Timeout“. Des Weiteren kann man mit Javascript leichter Überprüfungen anstellen. CSS hat keine Möglichkeit zu zeigen, ob es überhaupt eingeschaltet ist.

Empfehlungen

Die Geschwindigkeit ist auch bei Javascript hoch.  Quelle: Tim Reckmann / Pixelio.de

CSS taugt gut für kleine, schnelle Animationen - ein Menü oder ähnliches. Möchte man dagegen weitere Effekte, zum Beispiel mit Stoppen, Pausieren oder Wiederholen umsetzen, sollte man eher zu Javascript greifen. Hier hat der Webdesigner mehr Möglichkeiten und eine bessere Kontrolle über die Animationen. Bei Performance-Tests hat Javascript bei neueren Endgeräten besser abgeschnitten. Das alte Vorurteil, dass Javascript - selbst richtig angewendet - zu langsam sei, ist mittlerweile überholt.

Werden Sie ein Teil unserer Welt

Bestellen Sie unseren Newsletter und erhalten Sie Drucktipps, Angebote sowie Neuigkeiten aus der Druckbranche direkt per E-Mail.
Zusätzlich schenken wir Ihnen einen 5 EUR Gutschein für Ihre erste Bestellung.