Animationen leichtgemacht

Es gibt mittlerweile zahlreiche Frameworks und Bibliotheken für Animationen. Entweder über JavaScript beziehungsweise TypeScript oder direkt mittels CSS. Letztere Möglichkeit wurde in den vergangenen Jahren immer weiter aufgebohrt. Die aktuellen CSS-Versionen bieten immer ausgefeilte Möglichkeiten für Animationen an, die von modernen Web-Browsern immer besser unterstützt werden. Auch die Performance ist stetig besser geworden, was weitere Möglichkeiten für den Einsatz von Animationen eröffnet.Mit CSS-Animationen, einem vorgeschlagenen Modul für CSS, wird die Animation von HTML-Dokumenten direkt über CSS vorgeschlagen. Die erste Version des Entwurfs gab es bereits im März 2009 und die aktuelle Version des W3C Working Drafts wurde im Oktober 2018 veröffentlicht. Durch die Integration von Animationen in CSS steht dieses Feature auf modernen Websites praktisch ohne weitere Abhängigkeiten zur Verfügung. Die einzige konkrete Abhängigkeit ist ein moderner Browser, der mit den neuen CSS-Funktionen umgehen können muss. Der Fokus in diesem Artikel liegt auf CSS-Animationen und Websites. Etwas JavaScript wird in den Beispielen ebenfalls dazu gemischt, aber der Fokus auf Websites und CSS bleibt bestehen. Zudem behandelt der Artikel CSS-Animationen ohne weitere Rücksicht auf Web-Frameworks oder andere Komponenten-Bibliotheken.

Der zentrale Aspekt in diesem Artikel liegt auf modernen Animationen mittels Animate.css (Bild 1). Wie der Name vermuten lässt, basieren die Animationen in dieser Bibliothek auf den Möglichkeiten von CSS. Die Integration und die Nutzung sind damit sehr einfach und dennoch stehen zahlreiche Features zur Verfügung, wie der Artikel im weiteren Verlauf zeigt.Animationen haben sehr häufig den Beigeschmack, unnötig zu sein und/oder einen negativen Einfluss auf die Performance zu haben. Beide Punkte sind nicht zwingend falsch. Mit Animationen lassen sich User Interfaces aufwerten, weil Operationen und Anwendungsfälle visuell unterstützt werden können. Sind allerdings die falschen oder zu viele Animationen im Einsatz, kann genau der gegenteilige Effekt eintreten und das UI wird im schlimmsten Fall unbenutzbar.

Herausforderungen und mögliche Lösungen

Animationen haben sich dennoch zu einem Quasi-Standard bei Websites entwickelt. Kaum eine Seite, die nicht an mindestens der ein oder anderen Stelle auf eine Animation setzt. Die einfache Erklärung dafür ist: Weil es funktioniert. Das ist zwar eine wenig komplexe Antwort, die allerdings nicht ganz von der Hand zu weisen ist. Wenn Animationen praktisch immer stören würden und keine Nutzer anlocken oder Käufe in Online-Shops verhindern würden, dann wären Animationen wieder sehr schnell verschwunden. Die Tatsache, dass das Gegenteil der Fall ist, zeigt, dass Animationen die Nutzerinteraktion bestärken können.Herausforderungen gibt es dennoch genug. Beispielsweise sind mobile Geräte immer mitzudenken. Auch dort müssen Animationen funktionieren beziehungsweise benötigen diese Endgeräte nicht selten spezifische Animationen, damit der Sinn und Zweck der Visualisierung erhalten bleibt. Und über diesen Sinn und Zweck einer Animation lässt sich ebenfalls sehr lange grübeln, um keine unnötigen Visualisierungen und Bewegungen auf eine Website einzubauen.

Es gibt zahlreiche Lösungen, um Animationen in eigene Projekte zu integrieren. Eine naheliegende Möglichkeit sind die Features von CSS hinsichtlich der Animationen. Alternativ stehen zahlreichen Bibliotheken zur Verfügung, die ebenfalls viele Funktionen für Animationen aller Art bereitstellen. Eine davon ist Animate.css und weitere werden im Abschnitt zu den Alternativen vorgestellt. Nicht selten sind die Möglichkeiten für Animationen bereits in Frameworks integriert. Beispielsweise in Web-Frameworks wie Vue oder in Application-Frameworks wie Quasar (Bild 2).

Egal welcher Weg im Projekt der richtige ist, es existieren bereits zahlreiche Möglichkeiten, Animationen zu nutzen. Etwas selbst zu implementieren, beispielsweise auf Basis von Manipulationen des Document Object Models (DOM) ist selten eine gute Idee. So etwas schlägt sehr schnell auf die Performance.Der Schritt von rein statischen Websites hin zu animierten Seiten ist bereits rechts früh in der Geschichte von Websites erfolgt. Damit sind an dieser Stelle nicht die dynamischen Websites gemeint, die mit dem sogenannten Web 2.0 aufkamen. Es gibt weder um die Eingabe von Informationen noch um eine Interaktion mit dem Nutzer. In erster Linie sind Animationen von Teilen einer Website gemeint. Ein Teil dieser Entwicklung wurde vor allem durch zwei gegensätzliche Kräfte vorangetrieben. Internet-Autoren und -Leser wollen immer aufwendigere Arten von Inhalten über das Internet übertragen.Um so viele Benutzer zu erreichen wie möglich, muss die Dateigröße von Web-Inhalten allerdings klein genug sein, um den Inhalt schnell über Standard-Internetverbindungen zu übertragen. Vor allem in der Anfangszeit waren Telefonmodems ein stark limitierender Faktor.

Die Bedeutung von Animationen im Web

Ein erster Schritt auf dem Weg zu komplexen Animationen waren animierte GIFs. Also Bilderabfolgen, die im Browser mit einer bestimmten Bildrate pro Sekunde angezeigt wurden. Damit waren einfache Animationen möglich, die gerade in der Anfangszeit sehr umfassend für Werbung oder sonstigen Nonsens genutzt wurden. GIF-Dateien bieten zwar nur wenige Möglichkeiten, aber es sind Animationen und wurden so genutzt.Ein weiterer Schritt war dynamisches HTML, das über Skriptsprachen manipuliert wird. Dynamisches HTML (dHTML) ist der Begriff für die Softwaretechnologie, die dies möglich macht. DHTML-Inhalte werden durch die Verwendung unterschiedlicher Skriptsprachen, wie beispielsweise JavaScript, erzeugt, um auf das so genannte Document Object Model (DOM) eines Browsers zuzugreifen. Im Grunde steuert das DOM alles darüber, wie ein Browser eine Web-Seite anzeigt. Heutzutage verfügen praktisch alle Benutzer über Browser, die das DOM für Skriptsprachen zugänglich machen, so dass dieses Skript HTML-Elemente verändern kann. DHTML bietet ebenfalls überschaubare Möglichkeiten und mit einem oft eher negativen Effekt auf die Performance, wenn die DOM-Manipulationen zu umfangreich sind und häufig durchgeführt werden.

Web-Animationen mit universellen Programmiersprachen

Eine weitere Möglichkeit zur Bereitstellung von Web-Animationen sind universelle Programmiersprachen wie Java. Damit lassen sich Anwendungen erstellen, die, eingebettet in Websites, vom Benutzer aus dem Internet herunterladen werden. Java-fähige Browser nutzen eine Art Plugin, um die virtuelle Maschine von Java auszuführen. Java-Webinhalte werden im Allgemeinen in Form von Programmen erstellt, die Applets genannt werden. Applets sind keine vollständigen Softwareanwendungen - sie funktionieren nur in Verbindung mit einem Browser. Web-Designer können mit Applets alles Mögliche machen, und eine der beliebtesten Anwendungen ist die Animation. Die Hauptvorteile von Java sind, dass es auf allen Betriebssystemen funktioniert und sehr flexibel ist. Wir können damit ein Animationsprogramm erstellen, das einfache Vektorformen für die einzelnen Frames zeichnet, oder eines, das Bitmap-Bilder verwendet. Java eignet sich besonders für die Erstellung interaktiver Animationen und die Kombination von Animationen mit anderen Webseiten-Elementen.Java-Applets haben im vergangenen Jahrzehnt deutlich an Beliebtheit verloren. Das trifft ebenso auf zwei weitere Plugins-Formate zu: Flash und Shockwave. Macromedia hat mit zwei eng verwandten Formaten, Flash und Shockwave, großen Erfolg gehabt. Flash war das Standardformat für reichhaltige Animationen im Web, und Shockwave ist ein sehr beliebtes Format für die Darstellung komplexerer animierter Inhalte.Im Gegensatz zu Real Player- und QuickTime-Dateien erscheinen Flash- und Shockwave-Filme tatsächlich als Teil der Website und beinhalten ein hohes Maß an Interaktivität, genau wie eine einfache HTML-Seite. Der Shockwave-Player spielt nicht nur Animationen ab, sondern erkennt auch Benutzereingaben und steuert, wie der Browser reagiert. Aufgrund von zahlreichen Sicherheitsproblemen und Lücken, auch immer wiederkehrende, hat der Ruf dieser Formate sehr gelitten. Mittlerweile sind sie daher nicht mehr umfangreich im Einsatz und werden nach und nach ersetzt.

CSS und Animationen

Die Nutzung von CSS für Animationen reicht bereits etliche Jahre zurück. Bereits seit den 2000er Jahren kommt die Pseudo-Klasse hover zum Einsatz, um rudimentäre Animationen zu erstellen. Mit dieser CSS-Pseudo-Klasse lässt sich darauf reagieren, wenn sich beispielsweise die Maus über einem HTML-Element befindet. Daraufhin lässt sich dieses Element mittels CSS verändern, um die Hintergrundfarbe oder ähnliches zu verändern.Das erzeugt den Effekt einer Animation, gesteuert durch den Nutzer einer Website. Seit circa dem Jahr 2007 hat WebKit CSS-Animationen, -Transitionen und Transformationen als Features integriert. Im Jahr 2009 kamen implizite und explizite Animationen mittels CSS dazu und spätestens seit der Ankündigung zu CSS3 ist klar, dass Animationen ein elementarer Teil von CSS sind, da das moderne Web ohne schwer vorstellbar ist.Der aktuelle Stand ist, dass Animationen ein Modul von CSS sind. Der hover-Tag wird umfassend genutzt und zudem von allen großen Suchmaschinen unterstützt. Zudem unterstützen skalierbare Vektor-Grafiken einige @keyframes-Regeln, so dass sich mit diesen limitierten Transformationen ebenfalls Animationen erstellen lassen.Die Unterstützung durch Web-Browser ist dabei sehr gut. Alle großen Browser unterstützen Animationen. Die Kontroverse zwischen Animationen per CSS und per JavaScript halten dabei an. Beide Wege funktionieren und bieten unterschiedliche Möglichkeiten, so dass es für beide Varianten Befürworter und Gegner gibt.

Animationen und Transitionen

Zudem werden bei CSS häufig zwei Konzepte durcheinandergeworfen: Animationen und Transitionen. CSS-Transitionen und -Animationen sind in vielerlei Hinsicht ähnlich, unterscheiden sich aber darin, wie kompliziert die Übergänge sein können, wie der CSS-Code mit JavaScript interagiert, wie Schleifen funktionieren und welche Methodik die Animation auslöst. CSS-Transitionen eignen sich im Allgemeinen am besten für einfache Von-Bis-Bewegungen, während CSS-Animationen für komplexere Bewegungsabläufe geeignet sind. Da Transitionen und Animationen ähnliche Möglichkeiten bieten, sind sie leicht zu verwechseln. Mit beiden können wir Eigenschaftsänderungen (Property Changes) visualisieren. Wir können Lockerungsfunktionen (Easing Functions) festlegen, um die Geschwindigkeit zu steuern, mit der sich Eigenschaftswerte ändern.Zudem lässt sich die Dauer des Übergangs oder der Animation festlegen und es lassen sich Eigenschaften festlegen, die Änderungen interpretieren und eine Reaktion auslösen. Zudem können wir Daten über die Ereignisse sammeln, die den Übergang oder die Animation auslösen, und diese zur Verbesserung nutzen.

Einführung in Animate.css

Der Name der Bibliothek Animate.css verrät bereits, worum es sich handelt: Um Animationen mit CSS. Als Slogan nutzt die Bibliothek »Just-add-water CSS animations« was darauf abzielt zu beschreiben, dass das Hinzufügen von Animationen mittels Animate.css so einfach ist, wie ausschließlich Wasser zu einem Rezept hinzuzufügen. So wie bei Instantnudeln.Die Bibliothek unterstützt zahlreiche vorgefertigte Animationen, die einfach über den Namen der jeweiligen CSS-Klassen zu HTML-Elementen hinzugefügt werden können. Zusätzlich zu den CSS-Klassen lassen sich direkt die Keyframes nutzen und über die CSS-Variablen wichtigen Einstellungen verändern. Das zeigen die nachfolgenden Beispiele in diesem Artikel.Mit Anime.css lassen sich die unterschiedlichsten Animationen erstellen. Unterstützt werden unter anderem Bounce, Flash, Pulse, backIn/Out, bounceIn/Out, fadeIn/Out und noch viele mehr. Inklusive Einstellungen, die sich anpassen lassen, wie zum Beispiel die Animations-Geschwindigkeit. Auch das zeigen die zahlreichen Beispiele in diesem Artikel.Der Quelltext des Open-Source-Projekts ist auf GitHub verfügbar (Bild 3). Der Code steht unter der sogenannten Hippocratic License in Version 2.1. Das Projekt wurde aktuell seit zwei Jahren nicht mehr aktualisiert beziehungsweise es gab in dieser Zeit kein neues Release.

GitHub zeigt an, dass beim Schreiben dieses Artikels das letzte Update im Repository zwei Monate her ist. Allerdings fehlt das angesprochene neue Release. Das spricht auf der einen Seite dafür, dass die gewünschten Animationen enthalten sind und alles funktioniert. Auf der anderen Seite gibt es keine offensichtlichen Neuerungen. Woran das letztendlich liegt, konnte im Repository auf GitHub oder auf der Website nicht ausgemacht werden.

CSS, HTML und JavaScript

Beim Schreiben dieses Artikels ist Version 4.1.1 die neueste Ausgabe, die Anfang September 2020 erschienen ist. Das Projekt ist primär mit CSS umgesetzt, mit der Unterstützung von HTML und JavaScript. Das Repository wird von Waren Gonzaga betreut, einem Senior Software-Engineer von den Philippinen. Laut seinem GitHub-Profil hat er bereits an mehr als 50 Open-Source-Projekten gearbeitet.Laut GitHub kommt Animate.css in fast 130.000 anderen Projekten zum Einsatz. Das ist eine beachtliche Menge für eine recht kleine Bibliothek. Neben Waren Gonzaga arbeiten noch über 120 Mitwirkende am Projekt.Die Installation von Animate.css ist denkbar simpel. Zum Beispiel lässt sich das Paket über einen Paketmanager wie yarn im Projekt installieren:

Anschließend ist die Bibliothek einsatzbereit und die Animationen lassen sich nutzen. Neben dieser Installation ist die Integration über ein Content Delivery Network (CDN) in das eigene Projekt ebenfalls möglich. Verfügbar ist Animate.css unter anderem über UNPKG, cdnjs und jsDelivr:

Eine Installation über npm ist ebenfalls kein Hindernis. Generell besteht der Unterschied in den Installationsvarianten darin, dass die Nutzung von Paketmanagern weiteres Tooling erfordert, wie zum Beispiel Bundler. Beim Einbinden über einen direkten Link ist das nicht der Fall. Weitere Vorbereitungen oder Installationen sind nicht notwendig. Ein Import reich vollkommen aus, um Animationen zu nutzen, was das erste Beispiel im weiteren Verlauf des Artikels zeigt. Alle Beispiele in diesem Artikel befindet sich im Projekt auf StackBlitz und auf GitHub. Dazu aber später weitere Informationen (Bild 4).

Ein Vorteil von Animate.css ist, dass die Bibliothek in zahlreichen Browser funktioniert. Cross-Browser-Funktionalitäten sind bei CSS sehr wichtig, da sich die verschiedenen Browser-Implementierungen noch immer unterscheiden.

Zusammenspiel mit TypeScript und Integration ins Ökosystem

Die Bibliothek Animate.css arbeitet auch mit TypeScript problemlos zusammen. Das liegt primär daran, dass es sich um CSS-Animationen handelt, die erst einmal gar nichts mit JavaScript oder TypeScript zu tun haben. Wir können sowohl JavaScript als auch TypeScript nutzen, um weitere Möglichkeiten von Animate.css anzuwenden. Dazu später mehr in einem eigenen Abschnitt zu JavaScript und Animate.css.Das Zusammenspiel mit dem Ökosystem, zum Beispiel Angular, React und Vue als Vertreter von Web-Frameworks, ist ebenfalls gut. Wichtig ist, ob das eingesetzte Styling- beziehungsweise Komponentenframework mit Animate.css zusammenarbeitet.Im Kern haben die Web-Frameworks, um bei diesem Beispiel zu bleiben, gar nicht viel mit Animate.css zu tun. Sind aber fertige Komponenten im Einsatz und bieten diese Komponenten Features wie vorgefertigte Styles und Animationen, ist die Kompatibilität zu prüfen. Vue 3 bringt beispielsweise eigene Komponenten für CSS-Transitionen und -Animationen mit. Die Dokumentation erläutert detailliert deren Einsatz und gleichzeitig die Kombination mit Bibliotheken wie Animate.css.Ein weiteres Zeichen, dass die Bibliothek beliebt ist, wenn es um CSS-Animationen geht.Zudem existieren für die verschiedenen Web-Frameworks Wrapper-Bibliotheken, um Animate.css direkt einzubinden. Beispielsweise Vue2-animate. Ob diese aber notwendig sind und nicht eine Kombination möglich ist, wie in der Dokumentation von Vue 3 beschrieben, ist projektweise zu entscheiden. Ebenfalls zu prüfen ist, ob die in (Web-)Frameworks eingebauten Animationen und Transitionen nicht vielleicht für den eigenen Anwendungsfall ausreichend sind und externe Bibliotheken wie Animate.css überflüssig machen.Auch bei Application-Frameworks sind Animationen wichtig geworden. Unterstützung dafür gibt es ebenfalls in der Breite. Wie zum Beispiel bei Quasar, deren Implementierung sehr stark an Animate.css angelehnt ist.

Die Hauptfunktionen im Überblick

Die primären Funktionen von Animate.css beziehen verständlicherweise sehr stark auf die Möglichkeiten der CSS-Animationen. Die jeweiligen Animationen sind aufgeteilt in Kategorien, um die Art der Animation zu beschreiben. Beispielsweise gibt es Animationen, um die Aufmerksamkeit zu erlangen (Attention Seekers) und es gibt welche für das Verblassen, Rotieren und dergleichen. Die folgende Auflistung der Hauptfunktionen spiegelt diese Kategorisierung wider und listet weitere Möglichkeiten der Bibliotheken Animate.css auf. Zur besseren Einordnung werden die englischen Begriffe für die Kategorien beibehalten: Die Beispiele im weiteren Verlauf dieses Artikels geben einen Einblick, wie die Animationen genutzt werden können. Wie üblich zumindest für eine Teilmenge, da der Umfang ansonsten wie so häufig den Rahmen sprengen würde. Zudem zeigen die Beispiele einige der erweiterten Funktionen, den Einsatz mit JavaScript und die benutzerdefinierten Builds.

Das Demoprojekt auf StackBlitz

Das Demoprojekt mit Animate.css liegt wie üblich auf StackBlitz. Als Template für die Demo kommt ein normales JavaScript-Projekt zum Einsatz. Alle gezeigten Animationen befinden sich direkt in der HTML-Datei (index.html). Die Interaktion mit JavaScript zeigt dagegen die einzige JavaScript-Datei (index.js) die vorhanden ist.Installiert ist das Paket für Animate.css über den integrierten Paketmanager npm von StackBlitz. Wichtig ist, die Bibliothek bei der Installation klein zu schreiben, da das Paket ansonsten nicht gefunden wird. Wer das Projekt lokal ausprobieren möchte, findet alle Ressourcen im verknüpften Repository auf GitHub. Um nach der Installation der Bibliothek die erste Animation nutzen zu können, sind keine großen Vorbereitungen notwendig. Wichtig ist, dass das Import-Statement import 'animate.css'; für die CSS-Klassen von Animate.css eingebunden wird.In der Demo-Anwendung auf StackBlitz erfolgt dies direkt in der JavaScript-Datei. Anschließend können wir direkt die CSS-Klasse für die jeweiligen Animationen in unser HTML-Dokument einbinden und das Ergebnis bestaunen. Beispielsweise für das folgende h1-Element:

In diesem Fall nutzen wir den Bounce-Effekt, so dass die HTML-Überschrift von oben hüpfend angezeigt wird. Wichtig ist in diesem Zusammenhang, wie sich die CSS-Klassen aufbauen. Notwendig ist die CSS-Klasse animate__animated, um zu kennzeichnen, dass das entsprechende HTML-Element animiert werden soll. Zusätzlich können wir dann eine der zahlreichen Animationen über die CSS-Klassen nutzen, die uns Animate.css zur Verfügung stellt. Im Beispiel zuvor ist das der Attention Seeker mit Namen bounce. Wichtig bei der Schreibweise ist, dass wir den Präfix animate__ hinzufügen, also animate__bounce. Auf diese Weise sollen Namenskonflikte mit anderen Frameworks oder Bibliotheken vermieden werden. Das ist bereits die ganze Magie.

Einige Animationen am Beispiel

Der Einsatz der übrigen Animationen verläuft wie das zuvor gezeigte Beispiel. Wir suchen uns den Namen einer Animation raus und bauen diesen gemäß dem Namenschema der CSS-Klassen in unser HTML-Dokument ein. Zum Beispiel wie folgt:

Die Animation animate__tada ist ein weiterer Attention Seeker. Damit wackelt das animierte HTML-Element im Dokument, um auf sich aufmerksam zu machen. Den konkreten Namen der CSS-Klasse findet sich sehr simpel direkt über die Website von Animate.css, wie Bild 5 zeigt. Wir können ihn dort direkt kopieren oder bauen den Namen gemäß Schema zusammen, wenn der Name der CSS-Klasse bereits bekannt ist. Des Weiteren lassen sich alle Animationen direkt auf der Website von Animate.css anklicken. Daraufhin bewegt sich die Überschrift auf der Website gemäß der angeklickten Animation. Das ist bei der Auswahl der richtigen Animation eine große Hilfe.

Viele Animationen sind unterteilt in die sogenannten Entrances und Exits. Erstere animieren ein Element so, dass es in irgendeiner Weise im HTML-Dokument erscheint. Letztere sind Animationen, um ein HTML-Element verschwinden zu lassen. Die folgenden beiden Elemente zeigen das:

Das erste h1-Element ist nicht sichtbar im HTML-Dokument vorhanden und fliegt von links ein. Das zweite h1-Element ist beim Laden vorhanden und verschwindet nach rechts. Auf diese Weise lassen sich zahlreiche von anderen Websites bekannte Animationen nachbauen.

Der Einsatz von @keyframes und CSS-Variablen

In den vorherigen Beispielen kamen die CSS-Klassen zum Einsatz, um damit direkt Animationen an HTML-Elemente zu binden. Das ist sicherlich die einfache und schnelle Art, Animationen in HTML-Dokumenten zu nutzen.Obwohl Animate.css einige dieser CSS- Animationsklasse als Hilfsklassen bereitstellt, können wir die mitgelieferten Animations-Keyframes direkt verwenden. So lässt sich Animate.css flexibel im eigenen Projekt verwenden, ohne den HTML-Code umgestalten zu müssen. Das kann ebenfalls ein Vorteil sein, insbesondere beim Einsatz von Animationen in bereits recht umfangreichen Projekten oder beim Umstieg von anderen Animations-Bibliotheken.Das folgende Listing zeigt eine eigene CSS-Klasse, die sich mittels Referenz direkt auf die Definition einer Keyframe-Animation bezieht:

Die Animation in diesem Beispiel ist Bounce. Zusätzlich müssen wir die Dauer angeben, damit die Animation korrekt ausgeführt wird.Bei der Nutzung dieser Animationen ist zu beachten, dass einige Animationen von der Eigenschaft animation-timing abhängig sind, die in der Klasse der Animation festgelegt ist. Das Ändern oder Nicht-Deklarieren dieser Eigenschaft kann zu unerwarteten Ergebnissen führen. Falls sich eine Keyframe-Animation also nicht so verhält wie gedacht, könnte es an der fehlenden Timing-Definition liegen.Des Weiteren können wir über CSS-Variablen Einfluss auf Animationen nehmen. Seit Version 4 von Animate.css ist das möglich, da die Bibliothek ab diesem Zeitpunkt benutzerdefinierte Eigenschaften nutzt, auch als CSS-Variablen bekannt, um die Dauer, die Verzögerung und die Wiederholungen der Animation zu definieren. Dies macht Animate.css sehr flexibel und anpassbar. Wenn wir beispielsweise die Dauer einer Animation ändern möchten, können wir das sehr flexibel über die Variablen steuern:

Die erste Definition bezieht sich dabei auf die konkrete Animation animate__bounce. Im zweiten Teil des Beispiels werden die Dauer und die Verzögerung global verändert.Über diese CSS-Variablen haben wir gleichzeitig eine große Flexibilität und einen erheblichen Einfluss auf die Animationen, ohne viel Code nutzen zu müssen. Ein kleiner Nachteil ist, dass ältere Browser keine CSS-Variablen unterstützen. Hier nutzt Animate.css einen notwendigen Fallback, damit die Bibliothek in diesen Browser trotzdem funktioniert. In Zukunft sollte dieses Problem der Unterstützung aber immer kleiner werden.

Hilfsklassen vereinfachen die Nutzung

Um die Nutzung der Bibliothek und den Einsatz von Animationen noch weiter zu vereinfachen, bietet Animate.css eine Reihe von Hilfsklassen an. Zum Beispiel, um Verzögerungen einzubauen:

In diesem Fall wird die Bounce-Animation genutzt, wie bereits in einem vorherigen Beispiel gezeigt, aber durch die CSS-Klasse animate__delay-4s um vier Sekunden verzögert gestartet. Das macht es in der Praxis sehr einfach, die Animationen zu verändern, ohne direkt in irgendeiner Weise in den Code eingreifen zu müssen. Für die Verzögerung gibt es beispielsweise vorgefertigte Klassen für zwei, drei, vier und fünf Sekunden Verzögerung. Über die direkte Einstellung im CSS-Code lässt sich diese Verzögerung ebenfalls beeinflussen. Entweder pro Element oder global. Das folgende Listing zeigt zwei globale Beispiele. Im ersten Fall starten alle Animationen 2x langsamer, im zweiten Fall starten sie doppelt so schnell:

Darüber hinaus existieren Klassen, um Animationen langsamer und schneller ablaufen zu lassen. Es existieren die CSS-Klassen animate__slow (2s), animate__slower (3s), animate__fast (800ms) und animate__faster (500ms). In Klammern steht die Verzögerung, die zum Tragen kommt. In der CSS-Klasse animate__animated kommt die Standardgeschwindigkeit von einer Sekunde zum Einsatz. Über den direkten Zugriff lässt sich die Dauer ebenfalls anpassen. Wird die Dauer aller Animationen über --animation-duration verändert, passen sich alle Animationen entsprechend dem Verhältnis an, da intern die CSS-Funktion calc() zum Einsatz kommt.Das identische Muster lässt sich für Wiederholungen von Animationen nutzen. Die Klassen animate__repeat-1 bis animate__repeat-3 fügen eine bis drei Iterationen einer Animation hinzu. Entsprechend nutzt die CSS-Klasse animate__infinite eine unendliche Iterationsanzahl.

Animate.css und JavaScript

Die Kombination von Animate.css und JavaScript ermöglicht noch viele weitere Anwendungsfälle. Beispielsweise lassen sich die Selector-Funktionen nutzen, um Elemente mit bestimmten CSS-Klassen oder IDs zu ermitteln, um CSS-Klassen für Animationen hinzuzufügen. Da sich das dynamisch durchführen lässt, bietet das viele Möglichkeiten, auf Eingaben, Daten oder andere Ereignisse zu reagieren.Zudem ist es möglich, auf das Event animationend (Animation End) zu lauschen, um im JavaScript-Code mitzubekommen, wenn die Animation durchgeführt wurde:

Sobald die Animation fertig ist, wird unsere Callback-Funktion aufgerufen. Zudem lassen sich bestimmte Eigenschaften anpassen, wie die Dauer im folgenden Beispiel:

Diese Möglichkeiten erlauben es uns, Animations-Abläufe zu schaffen. Beispielsweise können wir auf das Ende einer Animation lauschen, um eine neue Animations-Klasse zu einem HTML-Element hinzuzufügen. Das ermöglicht noch deutlich größere Flexibilität. Die Dokumentation von Animate.css bietet dazu weitere Beispiele, so dass an dieser Stelle auf die gute Dokumentation verwiesen wird.

Thema Barrierefreiheit

Das Thema Barrierefreiheit (Accessibility) spielt bei Animiate.css eine Rolle. Konkret dadurch, dass die Bibliothek die Medienabfrage prefers-reduced-motion unterstützt, so dass Benutzer mit Bewegungsempfindlichkeit Animationen ausschalten können. Auf unterstützten Plattformen, wozu derzeit alle wichtigen Browser und Betriebssysteme zählen, einschließlich mobiler Geräte, können Nutzer in den Einstellungen des Betriebssystems die Option Bewegung reduzieren auswählen, wodurch CSS-Übergänge ausgeschaltet werden, ohne dass weitere Einstellungen erforderlich sind. Das hilft dieser Personengruppe erheblich, Angebote mit Animationen nutzen zu können, von denen sie ansonsten ausgeschlossen wären. Mit Animate.css können wir diese Funktionalität direkt mit in eigene Projekte integrieren.

Migration und Breaking Changes

Mit Version 4 von Animate.css wurden einige Verbesserungen und Änderungen eingeführt, die bei einem Upgrade zu berücksichtigen sind. Eine umfassende Änderung ist, dass alle CSS-Klasse der Bibliothek jetzt mit dem animate__ Präfix ausgestattet sind. Das ist ein Breaking Change und macht eine direkte Migration erst einmal unmöglich.Um in älteren Projekten aber nicht für noch mehr Probleme als nötig zu sorgen, gibt es ein Kompatibilitäts-Release mit der Datei animate.compat.css. Wird diese Datei genutzt, existieren die CSS-Klasse für Animationen weiterhin ohne Präfix. Damit ist es in einem Projekt möglich, schrittweise zu migrieren und anschließend auf die Datei animate.min.css der aktuellen Version zu wechseln. Dieses Vorgehen funktioniert sowohl beim Einsatz eines Bundlers als auch direkt über ein CDN.Zu berücksichtigen ist, dass dieses Kompatibilitäts-Release ist zukünftigen Versionen entfernt werden könnte beziehungsweise keine Updates mehr erhält und sich vom eigentlichen Release immer weiter entfernt. Der schrittweise Wechsel von diesem Release weg sollte daher nicht auf die allzu lange Bank geschoben werden.

Sinnvolle sowie nützliche Animationen

Animationen bieten die Möglichkeit, die Usability einer Website stark zu beeinflussen. Sowohl negativ als auch positiv. Im starken Zusammenhang damit stehen aussagekräftige Animationen, um zum Beispiel Workflows in der Oberfläche zu unterstützen und nicht einfach, um etwas zu animieren, weil es möglich ist.Daher lautet ein Tipp, ein Element nicht nur um seiner selbst willen zu animieren. Animationen sollten vielmehr eine Absicht deutlich machen, zum Beispiel um die Aufmerksamkeit auf wichtige Bereiche zu lenken, wenn beispielsweise ein neuer Nutzer die Oberfläche nutzt. Eingangs- und Ausgangsanimationen können wir nutzen, um zu zeigen, was in der Benutzeroberfläche passiert, und um deutlich zu signalisieren, dass Elemente der Oberfläche in einen neuen Zustand übergehen. Animationen dürfen den Benutzer oder die Nutzung der Oberfläche nicht verhindern oder beeinträchtigen, da sie damit den Zweck vollkommen verlieren. Ein weiterer Tipp ist, keine großen Elemente zu animieren. Dadurch ist es schwierig, der Animation beziehungsweise dem Element zu folgen, was lediglich Verwirrung erzeugt. Auch Wurzelelemente, wie <html> oder <body> können zwar animiert werden, sollten es aber nicht. Technisch ist es möglich, es kann aber zu merkwürdigen Browser-Bugs führen und ein komisches Verhalten der Animationen erzeugen.Des Weiteren ist ein Rat, endlose Animationen zu vermeiden. Diese sind nach einiger Zeit sehr ablenkend und ziehen unnötig die Aufmerksamkeit der Nutzer auf diese Elemente.Bei diesen zahlreichen Hinweisen und Tipps bleibt die Frage im Raum, wann Animationen zum Einsatz kommen sollten. Qualitativ hochwertige und angemessene Animationen sorgen sowohl für Ästhetik und helfen bei der Arbeit durch die Visualisierung benötigter Informationen. Animationen lassen sich somit in einer Reihe von Fällen einsetzen: Es bleiben daher etliche Anwendungsszenarien übrig, um Animationen einzusetzen. Die Vor- und Nachteile von Animationen lassen sich damit ebenfalls gut zusammenfassen. Die Vorteile sind: Hervorhebung wichtiger Features, Verbesserung des Designs, Steigerung der Interaktion und Unterstützung der Naviagtion. Nachteile gibt es natürlich auch: Zu viel könnte sehr ablenkend wirken, Animationen können sich negativ auf die Ladegeschwindigkeit auswirken und und Nutzer könnten negativ reagieren. Diese Vor- und Nachteile und Möglichkeiten sollten wir beim Einsatz von Animationen berücksichtigen. Es lohnt sich vorher darüber nachzudenken, wo Animationen auf der eigenen Website einen Mehrwehrt bringen können und wo nicht.Unter der Haube nutzt Animate.css Technologien und Werkzeuge wie npm, postcss und postcss-preset-env. Dadurch bietet sich die Option, eigene Builds von Animate.css zu erzeugen. Was wir dafür brauchen, ist schnell beschrieben. Zunächst müssen wir das Repository von Animate.css klonen:

Anschließend lassen sich die Abhängigkeiten über einen Aufruf von npm install installieren. Das Kommando npm start erzeugt den Build und erstellt die drei Dateien animate.css, animate.min.css und animate.compat.css.So weit, so gewöhnlich. Wenn wir jetzt die Datei ./source/animate.css verändern, können wir dort die Imports entfernen, die wir nicht benötigen. Beispielsweise, um nur bestimmte Attention-Seekers-Animationen übrig zu lassen. Erzeugen wir jetzt einen neuen Build, enthält dieser lediglich eine Auswahl der Animationen. Das macht den erzeugen Build zudem kleiner. Auf diese Weise können wir projektspezifische Builds von Animate.css erzeugen, die hochoptimiert für den aktuellen Einsatz sind.

Alternative Bibliotheken

Neben Animate.css gibt es eine ganze Reihe von Bibliotheken, um Animationen auf Websites einzubauen. Und dabei sind die Möglichkeiten von Web-Frameworks und Komponenten-Bibliotheken noch nicht einmal mitgezählt. Einige nennenswerte Bibliotheken sind die folgenden: Bei der Auswahl einer Bibliothek oder eines Frameworks ist es essenziell, auf die eigenen Anforderungen zu schauen. Es gibt eine breite Auswahl und zahlreiche Animationen. Beispielsweise eine Bibliothek mit einem großen Fundus an Animationen einzubinden und lediglich zwei bis drei Animationen zu nutzen, lohnt sich in der Praxis eher selten.

Fazit

Animationen sind wichtige Hilfsmittel für die Usability von Websites. Sie können Anwendungsfälle unterstütze, bei der Navigation helfen, Features hervorheben und ein Onboarding von neuen Nutzern beschleunigen.Animationen zu erstellen und einzubetten ist dabei so einfach wie nie zuvor. Zahlreiche Bibliotheken und Frameworks machen es uns einfach, die Möglichkeiten direkt zu nutzen.Das birgt auf der anderen Seite die Gefahr, Animationen großflächig einzusetzen. Alles zu animieren, was sich in HTML animieren lässt. Keine gute Idee, da das Nutzer eher davon abhält, eine Website zu verwenden. Animate.css bietet als Bibliothek einen guten Mix aus Features, Größe, Performance und Einsatzgeschwindigkeit. Ein paar Handgriffe und die ersten Animationen erscheinen im Projekt. Anpassungen sind ebenfalls umfassend möglich, was viel Flexibilität bietet.Wer daher auf der Suche nach einer Bibliothek für CSS-Animationen ist und auf den Einsatz von JavaScript nicht verzichten möchte, sollte einen Blick auf Animate.css werfen. Die Bibliothek verdient sich daher ein Sehr gut und eine glatte Empfehlung. Wer auf der Suche nach Animationen auf Basis von CSS ist, darf sich Animate.css gerne aus der Nähe anschauen.