CSS3 ermöglicht es, ohne Zuhilfenahme von JavaScript sogenannte Keyframe-Animationen zu erstellen. Bei dieser Technik bestimmt man Anhang von einigen wenigen Schlüsselbildern einen groben Ablauf einer Animation, die restlichen Zwischenbilder werden dann automatisch generiert und über eine vorgegebene Zeit eingespielt. Keyframe-Animationen sind u.a. aus Adobes Flash bekannt, bei dem die Keyframes in einer Zeitleiste festgelegt werden können. Der Vorteil liegt klar auf der Hand: Man braucht nicht die komplette Szene durchzuanimieren, es genügt, die wichtigsten Eckpunkte in Form von Schlüsselbildern festzulegen. Nahezu jede CSS-Eigenschaft kann somit animiert werden.
Klar, die Keyframe-Animationen von CSS3 sind lange nicht so flüssig und ausgereift wie die von Flash oder solche, die mit JavaScript realisiert werden können. Für einfache Button-Mouseovers zum wechseln der Farbe oder für ein wenig Bewegung reicht es aber allemal. Splashnology hat das Prinzip der CSS3-Keyframe-Animation, die bisher nur in Webkit-basierten Browsern (Safari, Chrome) zur Verfügung stehen, in einem kurzen und übersichtlichen Tutorial erklärt.
zum Artikel
Kurzes Tutorial für CSS3 Keyframe-Animationen
