JavaScript sei Dank, ist es uns als Entwickler möglich, die User-Experience unserer Kunden mit Animationen zu erhöhen. Aber gerade für einfache Animationen wie einen klassischen Fade-In oder -Out kann JavaScript einen unnötigen Overhead darstellen. Abhilfe schafft hier „animate.css“, eine kleine, aber feine CSS-Library, die den Alltag von Entwicklern vereinfachen soll. Im Unterschied zu Transit.js basieren alle Animationen auf reinem CSS und bringen somit „nur“ die klassischen Vendor-Probleme mit sich – allerdings ist „animate.css“ bereits „Cross-Browser“-fähig. Mit 32 Kilobyte in der „Vollversion“ ist die Library kein Leichtgewicht, allerdings bietet „animate.css“ die Option von „Custom-Builds“. Damit kann man die Library anpassen und somit auch verkleinern. Beachtet aber, dass gerade bei mobilen Geräten Animationen nicht gerade flüssig ablaufen können, außer es wird mit CSS3 und der Hardware-Beschleunigung gearbeitet – aber nun zu „animate.css“ selbst.

Die Implementierung in ein bestehendes Projekt ist sehr einfach. Nach dem Einbinden der Library animierst du Objekte einfach mit einer .animated-Klasse, gefolgt von der Angabe des Klassennamens des gewünschten Effektes.

<header class="header animated fadeInLeft">...</header>

Und hier der Code den du nicht mehr schreiben musst:

@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}

@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}

100% {
opacity: 1;
-moz-transform: translateX(0);
}
}

@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}

100% {
opacity: 1;
-o-transform: translateX(0);
}
}

@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}

.animated.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

Oft will man eine Animation „triggern“, nachdem der Benutzer eine Interaktion durchgeführt hat. Eine einfache Methode hierfür ist das Benutzen des :hover-Pseudo-Elements. Damit kannst du eine Animation schnell und einfach umsetzen, auch ohne JavaScript einsetzen zu müssen.

.deine-klasse:hover{
-webkit-animation-name: swing;
-moz-animation-name: swing;
-ms-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

Dieses Snippet erzeugt bei Mouse-Hover eine unendliche „Swing“-Animation. Bei komplexeren Bedingungen muss allerdings auf JavaScript zurückgegriffen werden.

Um die Vorteile beider Welten nutzen zu können, kannst du mit altbewährter JavaScript-Syntax die CSS-Library weiterverwenden.

$('#yourElement').addClass('animated bounceOutLeft');

Du kannst natürlich auch eigenen CSS-Code verwenden, um Animationen anzupassen oder zu überschreiben. Hiermit kannst du zum Beispiel das Timing deiner Animationen besser abstimmen.

.delay-medium{
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s
}

.delay-long{
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-o-animation-delay:1.2s;
animation-delay:1.2s
}

Die einfachen „Out-Of-The-Box-Animationen“ sind schnell und leicht umzusetzen, um deiner Website den letzten Schliff verabreichen zu können. Ein „Custom-Build“ erlaubt es dir auch nur einige wenige Animationen zu verwenden. Unter Verwendung von JavaScript können einige gute Effekte erzielt werden. Ihr könnt euch animate.css von Github herunterladen. Auf der offiziellen Seite von animate.css könnt ihr euch einen Eindruck über alle verfügbaren Animationen verschaffen.

Was denkt ihr von „animate.css“? Schnickschnack oder nützlich?