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で処理するんだとか。