Linktipp - Elemente einer Webseite mittels CSS animieren

10-12-2015

Mit Hilfe von Animate.css lassen sich die Elemente einer Webseite animieren.

Auf der Webseite https://daneden.github.io/animate.css werden die verschiedenen Effekte demonstriert. Es lassen sich nicht nur Texte animieren, man kann auch Bilder oder andere Elemente damit animieren.

Wie man Animate.css in eine Webseite integriert, wird auf der Webseite https://github.com/daneden/animate.css erklärt.

Es sind 3 Schritte nötig um Animate.css auf einer Webseite zum Laufen zu bringen:

  1. Dateien herunterladen und die Datei animate.css.min im css Ordner platzieren.
  2. Im <head>Bereich der HTML Datei folgende Codezeile einfügen:

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

  3. Die Klasse animated den Elementen vergeben, die animiert werden sollen.

Schon kann man den verschiedenen Elementen die gewünschten Effekte zuweisen, als Beispiel:

<h1 class="animated slideInDown">Überschrift</h1>

Erklärung: Die Überschrift h1 erhält den Effekt slideInDown

Will man dass der Effekt sich wiederholt muss man die Klasse animated mit infinite ergänzen, als Beispiel:

<p class="animated infinite flash">Textzeile</p>

Erklärung: Die Textzeile erhält den Effekt flash der sich ständig wiederholt.

Kommentar eingeben