CSS3.0ではアニメーションが使えるので大変便利だ。
基本的には以下のようなかんじで使える。
#element {
margin:0;
height:54px;
width:61px;
background:url(image.png) left top no-repeat;
animation:play 0.3s steps(3) infinite;
}
@keyframes play{
0%{ background-position:0 0; }
100%{ background-position:0 -200px; }
}

でもこれじゃ動かなかったりする。
なぜかというとベンダープレフィックスが関与する場合があるからだ。
ここが詳しい→　http://kojika17.com/2013/02/ordering-vender-prefix.html
なので以下のような「-webkit-」とか「-ms-」とかが頭に付いたものをいちいち書いてやればOK。
先のリンク先にあるようにつけりゃいいってもんじゃないので注意は必要だそうだけれども。
#element {
margin:0;
height:54px;
width:61px;
background:url(image.png) left top no-repeat;
-webkit-animation:play 0.3s steps(3) infinite;
-moz-animation:play 0.3s steps(3) infinite;
-o-animation:play 0.3s steps(3) infinite;
-ms-animation:play 0.3s steps(3) infinite;
}
@-webkit-keyframes play{
0%{ background-position:0 0; }
100%{ background-position:0 -200px; }
}
@-moz-keyframes play{
0%{ background-position:0 0; }
100%{ background-position:0 -200px; }
}
@-o-keyframes play{
0%{ background-position:0 0; }
100%{ background-position:0 -200px; }
}
@-ms-keyframes play{
0%{ background-position:0 0; }
100%{ background-position:0 -200px; }
}