スマホでアニメーションするときはcss3の「translate3d」を使おう

jQueryのアニメーション

たとえばある要素をクリックしたときスライドするアニメーションをjQueryで書くとこんな感じですね。

javascript

 
	$('#rect').click(function(){
		$(this).stop().animate({'marginLeft' : '300px'}, 300); 
	});
	

css3のアニメーション

同じことをcss3のtranslate3dでやる場合はだいたいこんな感じになります。

javascript

 
	$('#rect').click(function(){
		$(this).css({
			'-webkit-transform':'translate3d(300px,0,0)', 
			'-webkit-transition':'-webkit-transform 400ms cubic-bezier(0,0,0.25,1)'
		});
	});
	

ちょっと長くなってしまいますが、これだけでスマホでも滑らかに動くようになります。
なんでもtranslate3dはGPUで処理するんだとか。