CSS basierte Animationen mit animate.css

Animationen auf Webseiten können dazu benutzt werden, die Aufmerksamkeit des Betrachters gezielt auf bestimmte Botschaften zu lenken. Während man bisher hauptsächlich Javascript einsetzt, ist es, mit der fortschreitenden Entwicklung der Browser und deren Fähigkeiten, nun auch möglich, Animationen als reine CSS-Lösung umzusetzen. Und das geht wirklich einfach.

 Zum technischen Grundverständnis empfehle ich zunächst die Lektüre des folgenden Artikels:
http://www.mediaevent.de/css/animation.html

Hast du das verstanden, kannst du gleich zum nächsten Schritt gehen und dir folgende Datei herunterladen:
http://daneden.github.io/animate.css/

animate.css ist eine css-Bibliothek, in der zahlreiche Effekte, vordefiniert sind. Du musst die @keyframes-Regeln nicht mehr selber notieren, sondern nur noch deine gewünschte Animation zum Element, was sich bewegen soll, hinzufügen.

Eine ausführliche Anleitung findest du hier:
http://t3n.de/news/css-statt-javascript-animatecss-482593/

Aus eigener Erfahrung möchte ich dazu noch ergänzen, dass Elemente, die bewegt werden sollen, in meinen Contao-Installationen immer auf position: relative; gesetzt werden müssen. Ansonsten scheint es nicht zu funktionieren.

30.04.2014 – Und hier noch ein Nachtrag.
animat.css ist crossbrowsertauglich, im IE funktionieren die Animationen aber erst ab IE10. Leider kann man derzeit den IE noch nicht getrost vergessen. Deswegen hier noch ein Linktipp für eine praktikable Sonderlösung.
http://sevenx.de/blog/tutorial-bootstrap-3-thumbnail-caption-animation-mit-animate-css/

 

 

1 Gedanke zu „CSS basierte Animationen mit animate.css“

  1. Hallo,

    vielen Dank für Deinen sehr interessanten Beitrag. Ich beschäftige mich derzeit berufsbedingt sehr intensiv mit CSS. Vor allen Dingen interessiert mich derzeit die Umsetzung von Animationen mit CSS anstatt mit Javascript. Dein Beitrag hat mich dabei sehr weitergebracht.

    Viele Grüße,
    Stefan Schuster

Kommentare sind geschlossen.