Animationen mit CSS3

Bisher hat man Animationen in Webseiten fast ausschließlich mit Javascript umgesetzt, aber es geht auch mit CSS3 und das sogar schneller und flüssiger.

animate


In den vergangenen Jahren hat man sich eigentlich immer darauf konzentriert, Effekte und simple Animationen mit Javascript umzusetzen. Bei komplexeren Effekten ist das dann meistens in viel Arbeit ausgeartet. Selbst mit den neuen Möglichkeiten mit CSS3 und Keyframe Animationen ist die Entwicklung von komplexen Animationen trotzdem immer noch zeitaufwendig.


Abhilfe schafft ein CSS3 Framework namens Animate.css. Hier kann man zwischen mehreren Animationen wählen und entweder alle oder nur einzelne Effekte in einer zusammengestellten CSS Datei herunterladen. Das komplette Framework umfasst dabei etwa 4000 Zeilen. 


Die meisten Webbrowser benutzen ihre eigenen Keyframedefintionen mit Prefixen, und erschweren damit die Entwicklung, zumal es bereits eine prefixfreie Möglichkeit solche Definitonen anzugeben. Animate.css unterstützt aber bereits die Effekte für Opera, Microsoft, Mozilla und Webkit.


Die coolste Animation ist hinge, auf deutsch Schanier, bei der das Objekt eine Halterung verliert, und dann ganz zu Boden fällt.