CSS Animationen mittels Framework

Die Zeiten in denen Webentwickler alles aus eigener Hand coden müssen, ist vorbei. Wer bereit ist, ein wenig auf Individualität zu verzichten, kann sich mit sogenannten Frameworks ziemlich viel Arbeit ersparen. Neben Frameworks für den Aufbau und Design einer Webseite, wie zum Beispiel Bootstrap, gibt es auch Frameworks mit deutlich spezielleren Fähigkeiten. Eines dieser Frameworks ist das Animate.css Framework.

Animate.css bietet viele Möglichkeiten HTML-Elemente beim Ein- und Ausblenden mit einer hübschen Animation zu versehen. Wer sich bei der Webentwicklung also nicht die Arbeit machen möchte, Animationen selbst zu coden, der kann spannende Animationen durch das Hinzufügen von Klassennamen ganz einfach mit Animate.css erledigen. Lediglich das Programmieren eines EventHandlers in JavaScript könnte von Nöten sein. Auf der GitHub-Seite des Frameworks, kann man alle Animationen ausprobieren. Schaut selbst: Animate.css GitHub.

Animate.css verwenden

Um das Framework verwenden zu können, muss man lediglich die CSS-Datei herunterladen und in den Head-Bereich der HTML-Datei als CSS-Datei einbinden. Daraufhin kann man jedem HTML-Element die entsprechenden Klassennamen geben. Der Klassenname animated gibt an, dass dieses Objekt vom Framework animiert werden soll. Die darauffolgende Klasse gibt an, wie die Animation aussehen soll. Zum Beispiel zoomInRight. Wie die einzelnen Animationsklassen heißen, findet man auf der Webseite von Animate.css heraus oder man liest sich in die CSS-Datei des Frameworks ein.