$(function(){
	var id  = "chara"; // ターゲット
	var width  = 20; // 1コマの幅
	var height = 34; // 1コマの高さ
	var fps    = 15;
	var frame = 0;
	var max_frame = 4; // 総コマ数
	var onceFlg = false;

	var interval = 1/fps*1000;
	animation = setInterval(intervalEvent, interval);

	function intervalEvent(){
		$("#"+id).css({
			"background-position-x" : -width * frame +"px" // 1コマづつ右にずらしていく
		});
		frame++;
		if(frame>=max_frame){
			if(onceFlg) clearInterval( animation );
			frame = 0;
		};
	};
});

1コマづつ横に並べた、横長スプライトシートの場合の例です。
縦に並べた画像の場合は15行目を編集する必要があるので注意。

var xg, yg;
window.addEventListener("devicemotion",device_motion,true);
function device_motion(evt){
	// device gravity x,y
	xg = Math.floor(evt.accelerationIncludingGravity.x);
	yg = Math.floor(evt.accelerationIncludingGravity.y);
};