Seite 2: Builds und Effektauswahl

Inhaltsverzeichnis

Der personalisierte Build

Animate.css ist eine Grunt-Anwendung. Bei Grunt handelt es sich um einen sogenannten Task-Runner. Einmal richtig konfiguriert, überwacht er sämtliche Dateien und überprüft beispielsweise auch JavaScript-Code auf Fehler. Kein Wunder, dass Grunt mittlerweile als Plug-in für zahlreiche Anwendungen wie LESS, Sass und CoffeeScript verfügbar ist. Dank ihm lassen sich personalisierte Builds des Frameworks erstellen.

Damit Grunt seine Aufgabe erfüllen kann, ist es via npm zu installieren. Dafür wird das Framework Node.js in einer Version >= 0.8.0 vorausgesetzt. Ausführliche Informationen zur Grunt-Installation und -Konfiguration gibt es auf der Projektseite.

$ cd pfad/zu/animate.css/
$ sudo npm install
 

Als Nächstes wird grunt watch aufgerufen, um die Änderungen durchzuführen und den eigenen Build zu erstellen. Sollen beispielsweise ausschließlich die beiden Effekte attention_seekers und bouncing_entrances im Build enthalten sein, muss der Nutzer die Konfigurationsdatei animate-config.json entsprechend anpassen.

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}
"bouncing_entrances": {
  "bounceIn": true,
  "bounceInDown": true,
  "bounceInLeft": true,
  "bounceInRight": true,
  "bounceInUp": true
} 

Tatsächlich sind innerhalb der Konfigurationsdatei animate-config.json von Hause aus sämtliche Effekte aufgeführt, die Animate.css zu bieten hat. Aus Gründen der besseren Performance nimmt man aber am besten nur die Effekte mit auf, die man tatsächlich benötigt.

Eine Auswahl an Effekten

Die Projekt-Website vermittelt einen ersten Eindruck von der Leistungsfähigkeit des Frameworks und den verfügbaren Effekten. Nachdem es eingebunden wurde, lässt sich Animate.css vergleichsweise einfach verwenden.

<link rel="stylesheet" href="css/animate.min.css" />
 

Dem gewünschten Element wird zunächst die Klasse animated zugewiesen. Als zweite Klasse muss man den Namen des anzuwendenden Effekts angeben.

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

Typische Optionen sind fadeInLeft, zoomOut, hinge usw. Auf der Demo-Webseite sind die verfügbaren Effekte und somit die Klassennamen aufgeführt.

Auch das Triggern von Animationen, nachdem ein Benutzer eine Aktion durchgeführt hat, ist möglich. Die einfachste Variante stellt dafür das bekannte CSS-Pseudoelement :hover dar. Vorteil dabei: Die Animationen lassen sich ohne den Einsatz von JavaScript realisieren.

.content: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;
}

Das gezeigte Beispiel löst beim eintretenden hover-Ereignis, also dann, wenn man mit dem Mauszeiger über das Element fährt, eine Swing-Animation aus. Die Dauer der Animationen lässt sich ebenfalls verändern:

#content {
   -webkit-animation-duration: 3s;
   - webkit-animation-delay: 2s;
   - webkit-animation-iteration-count: infinite;
}

Im obigen Ausschnitt sind die Animationslänge, die Dauer der Verzögerung und die Anzahl der Wiederholungen (im Beispiel ist es übrigens eine Endlosschleife) festgelegt.