Hallo und herzlich willkommen zu einem neuen Eintrag – diese Woche geht es um ein schönes kleines „CSS3 Animation Cheat Sheet“ vom Designer Justin Aguilar. In dessen CSS Datei finden wir mehrere reine CSS Animationen, die wir für unsere eigenen Projekt benutzen können.

Die Nutzung ist wahnsinnig einfach: Wir binden die CSS Datei („animations.css„) ein und verwenden die vordefinierten CSS-Klassen. Derzeit gibt es 18 Animationen:

Animationen zum initialen darstellen von Elementen
„slide up“, „slide down“, „slide left“, „slide right“, „slide expand up“, „expand up“, „fade in“, „expand open“, „big entrance“ und „hatch“.

Sonsitge Animationen
„bounce“, „pulse“, „floating“, „tossing“, „pull up“, „pull down“, „stretch left“, „stretch right“.

Nutzung

Wie vorhin beschrieben ist die Nutzung sehr einfach… Es wird einfach die gewünschte CSS Klasse auf ein Element gelegt – Prompt startet die Animation. Das lässt sich natürlich hervorragend mit jQuery, Prototype & Co. verbinden.
Ein kleines Beispiel:

<div id="element">Dieser Text soll bei Klick wackeln</div>

<script>
// Prototype syntax.
$('element').on('click', function () {
   this.addClassName('tossing');
});
</script>

Das Ergebnis schaut in etwa so aus:

Dieser Text soll bei Klick wackeln

(Yeah, interaktive Beispiele!)

Vor- und Nachteile

Vorteile: Die Animationen selbst kommen komplett ohne Javascript aus – somit ist kein Skript sondern der Browser selbst für die Bewegung zuständig. Das kann sich durchaus positiv auf die performance auswirken. Außerdem werden die Animationen durch einfaches hinzufügen und/oder entfernen von CSS Klassen gesteuert – das geht schneller von der Hand als eine (mehr oder weniger komplexe) Javascript Funktion. Browser, die nicht mit den Animationen umgehen können werden keinerlei Fehler produzieren. Modern!
Nachteile: Die CSS Datei ist relativ groß und bietet nur wenige Animationen. Es gibt für jede Animation mehrere zusätzliche „-webkit-*“ Fallbacks. Man wird, sofern die Animation nicht „ab sofort“ spielen soll, nicht komplett auf Javascript verzichten können. Wenn es sich um „Notwendige“ Animationen handelt muss man ein Javascript Fallback einbauen (Ggf. mit Hilfe des modernizr). Die Animationen lassen sich nur in aktuellen Browsern bewundern – womit wir zum nächsten Punkt kommen…

Kompatibilität

Kompatibel sind im Grunde alle Browser, die CSS3 Animationen und „Keyframes“ beherrschen. Bedeutet: die üblichen Verdächtigen und der Internet Explorer ab Version 10. Siehe auch w3schools.com.

Mehr Infos!

Ich konnte den guten Justin Aguilar zwar bei github finden, allerdings hat er (bisher) keines seiner Projekte dort eingestellt… Bedeutet, ihr könnt euch das Cheat Sheet nur auf seiner eigenen Seite runterladen. Leider ist es auf diesem Weg schwierig zu beurteilen ob das Cheat Sheet noch aktiv entwickelt wird.
Die CSS Datei gibt es übrigens nur in „Originalgröße“ – es existiert also keine minimierte Version. Die Datei hat etwa 1130 Zeilen und bringt 20kb auf die Waage.

Gibt es Alternativen?

Ja, die gibt es! Eine der größten (und bekanntesten) dürfte wohl „animate.css“ sein… Dieses Projekt bringt weitaus mehr Animationen mit und bietet sogar eine „custom build“ Oberfläche! Im github Repo gibt es außerdem eine normale und minimierte Version – Die normale Version hat knapp 3500 Zeilen und 66kb, die minimierte Version hat eine Zeile und 50kb.
Außerdem scheint aktiv am Projekt gearbeitet zu werden – der letzte commit ist nur wenige Tage alt.

Kennt ihr noch weitere Alternativen? Ich würde mich freuen davon in meinen Kommentaren zu lesen!
Mit diesen Worten möchte ich mich auch wieder bis nächste Woche verabschieden – Ich wünsche euch eine angenehme Woche!