Web-Animation: Einfach und Performant

JavaScript- und CSS-Lösungen im Vergleich

Grundsätzliches zu Web-Animationen

Animationen und animierte Interaktionen gehören seit jeher zu einem der wichtigsten Werkzeuge, um Usability und User Experience eines Internetauftritts zu fördern. Das gelingt manchmal besser, manchmal schlechter. Animationen sollten immer sparsam und gezielt eingesetzt werden. Der Kontext ist dabei wichtig.

Profitiert der Besucher davon? Lenkt die Animation möglicherweise von Inhalten ab oder lässt sie den Internetauftritt unruhig oder gar unprofessionell erscheinen? Wenn diese Fragen beantwortet sind, stellt sich bereits die nächste: Wie lässt sich die Animation am besten realisieren? JavaScript oder CSS? Zu berücksichtigen sind dabei Arbeitsaufwand, Einfluss auf die Ladezeit, Komplexität der Animation, Kompatibilität mit den verschiedenen Browsern und mögliche Einbußen bei der Performance der Webseite. Gerade Letzteres spielt besonders auf Mobilgeräten eine große Rolle und wird oft nicht genügend berücksichtigt.

Klassische JavaScript-Animation

Die Animation via JavaScript gehört mit zu den Grundlagen der alten Schule des Webdesigns. Slider, Menüs und Popups lassen sich mit JavaScript realisieren. Animationen können, je nach Arbeitsaufwand, fast beliebig komplex werden, bis hin zu „Drag and Drop“-Funktionen. JavaScript-Animationen lassen sich pausieren, beschleunigen, verlangsamen oder überspringen, wenn eine neue Interaktion – zum Beispiel ein Mausklick – erfolgt. Das erlaubt viele Freiheiten in der Gestaltung der Animation.

Oft schlagen sich JavaScript-Animationen aber auch in der Ladezeit einer Webseite nieder, sind bekannt für Kompatibilitätsprobleme mit Internet Explorer und Firefox oder laufen nicht sauber ab. Dies ist besonders auf Mobilgeräten oder bei Verwendung von jQuery, einer weitverbreiteten Library (Erweiterung) für JavaScript, zu beobachten. Durch gezielte Optimierung und die Verwendung von performanten bzw. effizienten Libraries, wie GSAP, lassen sich diese Schwachstellen an JavaScript-Animationen ausgleichen. An die Performance und die Ladezeiten-Freundlichkeit einer reinen CSS-Animation reichen diese aber trotzdem nur selten heran.

Eine einfache JavaScript-Animation:

#content {
background-color: yellow;
}
<script>
function display()
{
document.getElementById(„content“).style.backgroundColor = „blue“;
}
</script>

CSS-Animation

CSS-Animationen gelten allgemein als performanter und vertragen sich in der Regel besser mit Mobilgeräten als JavaScript-Animationen. Der Verzicht auf separate JavaScript-Dateien und die browserseitige und hardwarebeschleunigte Animation steigern die Performance der Webseite und erlauben eine barrierefreie Bedienung auf allen Endgeräten. Bei der Hardwarebeschleunigung werden neben dem Hauptprozessor auch die Grafikprozessoren des Computers oder Smartphones verwendet, um die Animation zu berechnen. Außerdem birgt die CSS-Animation auch weitere Vorteile für den Workflow. Die Integration separater JavaScript-Dateien muss gar nicht erst vorgenommen werden und die Zahl der verwendeten Dateien wird auf ein Minimum reduziert, wodurch die Arbeitsumgebung an Übersichtlichkeit gewinnt.

Die Vorteile der CSS-Animation sind offensichtlich: Reduzierung der Ladezeit, Verbesserung der Performance, Kompatibilität mit Browsern und Mobilgeräten, Vereinfachung des Workflows. Ganz ohne Nachteile bleibt die Animation via CSS aber nicht. CSS ist – zumindest zum jetzigen Zeitpunkt – weder so flexibel, noch so mächtig, wie JavaScript. CSS-Animationen lassen sich nicht pausieren, beschleunigen, verlangsamen oder überspringen.

Bei sehr komplexen Animationen mit vielen Zwischenschritten steigt auch der Arbeitsaufwand. Was in JavaScript in wenigen Zeilen programmiert werden kann, verlangt in CSS oft mehr Code für dieselbe Funktion bzw. Animation.

Dadurch wird einer der Kernvorteile von CSS-Animationen umgekehrt: Ladezeit und Performance werden bei besonders komplexen Animationen durch ausufernde CSS-Codes genauso belastet, wie durch JavaScript-Animationen. Auch bei nachträglichen Änderungen an einer Animation entsteht deutlich mehr Arbeitsaufwand, als bei der JavaScript-Lösung. Das liegt daran, dass bei der CSS-Animation mit Keyframes gearbeitet wird. Das sind vordefinierte Animationsparameter, die chronologisch abgearbeitet werden. Diese Keyframes müssen einzeln angepasst werden, wenn man nachträgliche Änderungen an der Animation vornehmen möchte. In JavaScript hingegen können Start- und Endwerte sowie Geschwindigkeit und Dauer der Animation flexibel verändert werden.

Die selbe Animation, wie im Beispiel zu JavaScript-Animationen, würde in CSS (inkl. Browser-Prefixes) beispielsweise so aussehen:

@-webkit-keyframes changeColor {
from {color: yellow;}
to {color: blue;}
}
@-moz-keyframes changeColor {
from {color: yellow;}
to {color: blue;}
}
@keyframes changeColor {
from {color: yellow;}
to {color: blue;}
}
#content {
-webkit-animation: changeColor 5s ease-in;
-moz-animation: changeColor 5s ease-in;
animation: changeColor 5s ease-in;
}

Wann verwende ich nun CSS und wann JavaScript für Animationen?

Die Stärken von JavaScript liegen in der Erstellung komplexer Animationsphasen und dem vergleichsweise geringen Produktionsaufwand. Sowohl bei der Erstellung als auch bei der nachträglichen Änderung.

CSS dagegen hat in Sachen Performance und Browser-Kompatibilität die Nase vorn. Besonders bei kleineren, weniger komplexen Animationen, empfiehlt es sich, auf JavaScript zu verzichten und stattdessen mit CSS zu arbeiten. Das schlägt sich positiv in Ladezeit und Barrierefreiheit (Lauffähigkeit der Seite auf Mobilgeräten) nieder.