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