"bijin.css" を使ってアニメーションしています。

bijin.css で "bijin16.jpg" を切り分けて Animation します。

"bijin16.jpg" は 60*60 の Sprite を４行４列に並べた画像です。
この画像から CSS(Cascading Style Sheets) で Sprite を切り分けて描画します。

美人の画像を切り分ける "bijin.css" は CSS Sprite を参照して下さい。

美人の画像を切り分けてアニメーションするには、一枚の画像を順に切り替えなければなりません。
そこで "bijin.css" を参照して Sprite を描画する座標を pos 配列で定義します。
"bijin.css" からプログラムで抜き出す方法もあるのですが、pos を直接定義する方が簡単です。

  pos = ["0 0", "-60 0", "-120 0", "-180 0",
         "0 60", "-60 -60", "-120 -60", "-180 -60",
         "0 -120", "-60 -120", "-120 -120", "-180 -120",
         "0 -180", "-60 -180", "-120 -180", "-180 -180" ];

chenge() 関数で Sprite を切り替えながら pos の座標に描画します。

  num = 0;    //現在の画像
  function chenge()
  { num = (num+1)%16;
    var elementReference = document.getElementById( "sample" );
    elementReference.style.backgroundPosition = pos[num];
  }

body から setInterval で 200 ミリ秒ごとに chenge() 関数を呼び出します。
<body onLoad="setInterval('chenge()',200)">
最初に div タグで c0 の Sprite を "sample" の名前を設定して描画します。
<div class="chip c0" id="sample"></div>