css-sprite-animation.js

説明

-webkit-animationで動くスプライトアニメーションを作ります。
-webkit-transform:translate3dを利用しているため、iPhone上でも滑らかに動きます。

サンプル

元画像 (出典:http://www.thebest3d.com/pda/tutorials/array2animation/index2.html)

アニメ

コード

(function(){
	var settings = {
		name : "run",
		src:"http://www.thebest3d.com/pda/tutorials/array2animation/walksequence_spritesheet.png",
		width:240,
		height:296,
		fps:24,
		frames:30,
		column:6,
		iterationCount:"infinite"
	}
	var anime = new CSSSA(settings);
	$(anime.elem).appendTo("#sample");
	anime.play();
})();