Artikel mit dem Tag ‘Keyframe’

Mini-Tutorial: Sprite Animation mit CSS3

Juli 8th, 2011

Der bereits mehrfach hier erwähnte Blog Splashnology hat ein kleines Tutorial und Beispiel zum Thema Animation per CSS-Sprites veröffentlicht. Bei CSS-Sprites werden mehrere Grafiken in einer einzigen Grafikdatei abgelegt, der Webbrowser zeigt aber nur die gerade benötigte Teilgrafik an. Für die Animation ist dies in sofern von Nutzen, dass schon die komplette Grafikdatei geladen ist, es also keine Ladepausen zwischen den Bildsprüngen gibt. Animiert wird dann nur noch die background-position CSS-Eigenschaft, um den benötigten Teil der Grafik in den sichtbaren Bereich einer CSS-Box zu rücken.

Im Prinzip ist das also nur eine weitere Einsatzmöglichkeit der CSS3 Keyframe-Animation, die bereits im Artikel vom 3.7. erwähnt wurde. Funktioniert aber super und ruckelfrei. Leider bisher wieder nur in Webkit-Browsern (Chrome, Safari).

zum Artikel

Tutorial: Keyframe-Animationen mit CSS3

Juli 3rd, 2011

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

Splashnology CSS3 Keyframe Animations

Kurzes Tutorial für CSS3 Keyframe-Animationen