Kleine Animation mit CSS und einem spritesheet

Ein Spritesheed ist eine einzelne Grafikdatei, die aber mehrere kleinere Bildchen, Icons, Symbole oder Abwandlungen davon enthält. Mit CSS kann man dann prächtig die Positonen der gewünschten „Bildchen“ ansteuern. Es müssen hier jeweils aber nicht mehrere Grafiken geladen werden, sonder nur eine. Das spart Ladezeit und http-Anforderungen. In der Vergangenheit habe ich sprites z. B. für unterschiedliche Linkzustände hover, active etc. benutzt.

Prinzip: unterschiedliche Zustände (hover, active), unterschiedliche Positionen der Hintergrundgrafik.

Hover und Klick drauf!

<a id="css3sprite"></a>

#css3sprite {
width: 160px;
height: 160px;
display: block;
background: url(http://www.css3.de/upload/Peileppe_footman.png);
background-position: 0;
}
#css3sprite:hover {
background-position: -320px;
}
#css3sprite:active {
background-position: -480px;
}

Mit CSS3 und den @keyframes animationen kann man das Spritesheet auch als „Filmstreifen“ verwenden, der dann, Sequenz für Sequenz (unterschiedliche Positionen in dem Spritesheet), abläuft.

Hier das Spritesheet als Beispiel (verkleinert auf 600px width):
Peileppe_footman

{
..
animation: spritesanim 1s steps(5) infinite;
..
}
@keyframes spritesanim {
to {
background-position: -800px;}
}

Hier die Animation:

spritesheet: Quelle (openclipart.org, Footman von user: Peileppe)