一般的にスマートフォン向け（特にiPhone）の場合は、単純な2D移動でも「transform:translate」ではなく 「transform:transform3d」を使った方がCSSアニメーションが早いと言われています。これは、transform3dを使ったときにiPhone(多分Androidも3.0から)のハードウェアアクセラレーションが有効になるためと言われているためです。
ただ、普段スマホ向けサイトでアニメーションを実装する場合は、単純な左右上下の移動をさせたい場合がほとんどなので「translate」で事足ります。また、 Android2系で「transform3d」を使うとアニメーション後に対象エレメントのタップ領域がずれるという小さなバグがあるので、私は普段は「translate」を使うようにしています。
「transform:translate」の簡単なサンプル
スマホの実案件でアニメーションを使うのは、左右へのフリックを実装させたり、ちょっとしたスライドアニメなので、3Dや回転・拡縮などは使うことは少ないです。下記のサンプルでは四角をタップすると右へ180pxアニメーション移動します。※比較のためにtransform3dのほうも記述しました。
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.9.0rc1.js"></script>
</head>
<style>
#test{
width: 100%;overflow: hidden;position: relative;
}
.circle{
display: block;cursor: pointer;
width: 100px;height: 100px;
font-size:10px;text-align: center;line-height: 100px;color: #FFF;background:red;
}
/*translate-------- */
.c1anime{
-webkit-transition: all 0.3s ease;
-webkit-transform:translate(180px,0px);
}
/*translate3d-------- */
.c2anime{
-webkit-transition: all 0.3s ease;
-webkit-transform:translate3d(180px,0,0);
}
</style>
<script>
$(function(){
$('.startBtn').click(function(){
$('.c1').click();
$('.c2').click();
})
$('.c1').click(function(){
$(this).addClass('c1anime');
})
$('.c2').click(function(){
$(this).addClass('c2anime');
})
})
</script>
<body>
<div id="test">
<button class="startBtn">全て一緒に動かす</button>
<p>translate</p>
<div class="circle c1">タップで右に移動</div>
<p>translate3d</p>
<div class="circle c2">タップで右に移動</div>
</div>
</body>
</html>
このサンプルがかなり単純ということもあると思いますが、スマートフォンで見た場合両者に動きの差は感じられませんでした。普段実装時はもっと凝ったコンテンツ（画像や複雑なHTML）を動かしていますが、これでも3dと2d(translate)の差は感じられないので、やっぱりスマホ向けのCSSアニメにはtranslateでいいのではないでしょうか。
（提供： casemobile〜スマホコンテンツ開発ブログ）
はてブU-NOTEをフォローしておすすめ記事を購読しよう