アニメーションの繰り返し処理を実装する

繰り返しアニメーションし続ける処理を実装してみます。

サンプルコード

背景画像を繰り返し移動し続けるようにしてみます。
使用する背景画像の横幅は900pxです。

HTML

<div id="sample"></div>

CSS

#sample {
	width: 600px;
	height: 380px;
	background: url(bg.jpg) 0px 0px repeat-x;
}

JavaScript

$(function() {
	var posX = 0;
	setInterval(function(){
		if (posX <= -900) {
			posX = 0;
		}
		// 1回の移動距離
		posX -= 1;
		$('#sample').css({
			backgroundPosition: posX + 'px'
		});
	}, 100);
});

背景位置のX座標(posX)を0pxからマイナス方向に移動させていき、画像幅の900pxを超えたら0pxに戻すようにしています。
今回はbackground-positionの値を変更するようにしていますが、画像をposition: absolute;で配置してleftやtopの値を変更してアニメーションさせることもできます。
アニメーションの繰り返し処理を実装するデモページ