HTML 内のオブジェクトを移動させるには jQuery の animate メソッド を使うのが一般的（というか簡単）ですが、CSS3 の transition を使ってもできます。
プログラマー／デベロッパーの立場だと jQuery を使うことは珍しくないんですが、CSS はちと遠い存在で、基本は理解しているつもりでしたが、あまり接することがありませんでした。いい機会なので勉強がてら使ってみました。
さて、目的は似てるけどアプローチの異なる２つの手法、その違いはどこにあるのでしょう？
簡単に言えば animate は CPU 処理、transition は GPU 併用の処理になります。PC だと見た目にもあまり差はないかもしれませんが、比較的 CPU 性能の劣るスマホ（それもちと古めの）だと、この差がバッチリでそう。グラフィックチップを併用することで非力なCPU環境でもスムーズなアニメーション処理が実現できます。また見た目に差がなくてもCPUの負荷を軽減することにもなります。
実際に２種類のメソッドで同じアニメーションを実装したのが以下の例です。上の "Animate" をクリックすると jQuery.animate で、下の "Transition" をクリックすると CSS3.transition で、それぞれ重ねあわせスライドスクロール処理が行われます。PC ブラウザだとあまり差を感じないかもしれませんが、非力な環境ほど下の方がスムーズな動きになるはず。
Animate
Transition
ソースコード全文はこのページのソースを参照していただきたいのですが、大まかにはこんな感じになります：
共通の CSS クラス：
jQuery.animate を使った場合の HTML & JavaScript コード：
CSS3.transition を使った場合の HTML & JavaScript コード：
どちらのケースもクリック時にトグルのような動きをするのでそのための余分なコードがありますが、jQuery.animate では左座標（left）を指定して 700 ミリ秒でリニアにアニメートを、CSS3.transition でも左座標と効果（transition）を指定して 0.7 秒間で遷移するように css を変えています。違いはこの２箇所です。
もちろん全てのケースで有用というわけではないと思います。またこの例はかなりシンプルな内容なので違いが少なく見えていますが、現実的にはそう簡単にはいかないことはあると思います。ただ後者が使える環境であれば後者にすべきなのかな。
プログラマー／デベロッパーの立場だと jQuery を使うことは珍しくないんですが、CSS はちと遠い存在で、基本は理解しているつもりでしたが、あまり接することがありませんでした。いい機会なので勉強がてら使ってみました。
さて、目的は似てるけどアプローチの異なる２つの手法、その違いはどこにあるのでしょう？
簡単に言えば animate は CPU 処理、transition は GPU 併用の処理になります。PC だと見た目にもあまり差はないかもしれませんが、比較的 CPU 性能の劣るスマホ（それもちと古めの）だと、この差がバッチリでそう。グラフィックチップを併用することで非力なCPU環境でもスムーズなアニメーション処理が実現できます。また見た目に差がなくてもCPUの負荷を軽減することにもなります。
実際に２種類のメソッドで同じアニメーションを実装したのが以下の例です。上の "Animate" をクリックすると jQuery.animate で、下の "Transition" をクリックすると CSS3.transition で、それぞれ重ねあわせスライドスクロール処理が行われます。PC ブラウザだとあまり差を感じないかもしれませんが、非力な環境ほど下の方がスムーズな動きになるはず。
Animate
Transition
ソースコード全文はこのページのソースを参照していただきたいのですが、大まかにはこんな感じになります：
共通の CSS クラス：
<style type="text/css">
.c1{
position: absolute;
z-index: 1;
left: 100px;
opacity: 1;
width: 100px;
height: 100px;
background: yellow;
}
.c2{
position: absolute;
z-index: 0;
left: 100px;
opacity: 1;
width: 100px;
height: 100px;
background: red;
}
</style>
jQuery.animate を使った場合の HTML & JavaScript コード：
<a href="javascript:void(0);" id="aa">Animate</a>
<div class="c1"></div>
<div id="c2a" class="c2"></div>
<script type="text/javascript">
var ba = true;
$('#aa').on('click', function(){
ba = !ba;
var l = 200;
if( ba ){ l = 100; }
$('#c2a').animate(
{ left: l + 'px' },
{ duration: '700', easing: "linear" }
);
});
</script>
CSS3.transition を使った場合の HTML & JavaScript コード：
<a href="javascript:void(0);" id="at">Animate</a>
<div class="c1"></div>
<div id="c2t" class="c2"></div>
<script type="text/javascript">
var bt = true;
$('#at').on('click', function(){
bt = !bt;
var l = 200;
if( bt ){ l = 100; }
$('#c2t').css({
left: l + 'px',
WebkitTransition: 'left 0.7s linear',
MozTransition: 'left 0.7s linear',
MsTransition: 'left 0.7s linear',
OTransition: 'left 0.7s linear',
transition: 'left 0.7s linear'
});
});
</script>
どちらのケースもクリック時にトグルのような動きをするのでそのための余分なコードがありますが、jQuery.animate では左座標（left）を指定して 700 ミリ秒でリニアにアニメートを、CSS3.transition でも左座標と効果（transition）を指定して 0.7 秒間で遷移するように css を変えています。違いはこの２箇所です。
もちろん全てのケースで有用というわけではないと思います。またこの例はかなりシンプルな内容なので違いが少なく見えていますが、現実的にはそう簡単にはいかないことはあると思います。ただ後者が使える環境であれば後者にすべきなのかな。
