CSS3 Animations

Für eine Photogalerie www.pm-ingridwolff.de/photogalerie/ habe ich einige Beispiele der CSS3-Eigenschaften Animation, 2d Transform und Transition realisiert. Die Elementbewegungen werden ohne Einsatz von JavaScript erreicht.

Am Besten sieht man die 3D Animationen in den neuesten Versionen der -webkit- basierten Browser Safari und Chrome. Firefox unterstützt nicht 3D Transform und in Opera sind leider bisher nur wenige Transform- und Transition-Eigenschaften verwirklicht.

Einen Überblick über die Browserunterstützung für CSS3 Funktionen gibt es hier: http://www.normansblog.de/demos/browser-support-checklist-css3/. Etwas ausführlicher in diesen Tabellen: http://caniuse.com/

Auch einen Blick wert: Microsofts Kampf gegen den Steinzeit-Browser IE 6 führt zu einer Website, auf der aktuell seine weltweite Verbreitung nachgerechnet wird: http://ie6countdown.com/

Arbeitspapiere des W3C zu CSS3-Animationen: http://www.w3.org/TR/css3-animations/

Aquamunda

Die Website Aquamunda befasst sich mit dem Thema der Membran-Wasserfilter zur sauberen Trinkwassergewinnung. Die Animationseffekte wurden diesmal nicht mit Hilfe von JavaScript realisiert, sondern das Interesse lag hier ein wenig auf den CSS3 Eigenschaften Transitions, Transform und Scale. Bewegung wird bei den Infokärtchen über die Wasserfiltertechniken beim Mouseover erzeugt (um 1 Sekunde verzögert drängen sie in den Vordergrund, vergrößern sich und ändern die Position). Die einzelnen Kärtchen sind so angeordnet wie ein Zylinder mit Filtern und die Durchnummerierung entspricht der zeitlichen Entwicklung der jeweiligen Membrantechnik.

Browserkompatibilität: Beste Darstellung in WebKit Browsern wie Safari und Chrome. Leider zeigt Firefox die easing Funktionen der Transition Timing Eigenschaften nicht so gut an, und Opera unterstützt bei der transform Funktion nicht den Wert rotate. Natürlich werden diese CSS3 Eigenschaften in IE 7 und IE 8 nicht dargestellt, trotzdem ist es möglich, die Inhalte der Website in diesen Browsern zu lesen.

Weblinks: http://www.w3.org/TR/css3-transitions/, http://www.w3.org/TR/css3-2d-transforms/