CSS3サンプル

CSS3を使用した場合のサンプルを紹介します。
※サンプルで実際に動作させているソースは、動作の比較をするために、説明で使用しているソースとは若干異なります。

ドロップダウンメニュー（PCでご覧ください）

マウスオーバーしたときに展開するメニューです。

JavaScriptの場合

JavaScriptで同メニューを実装すると下記のような記述が一般的です。

HTML

  
メニュー（マウスカーソルをのせてください）
    

      
サブメニュー1
      
サブメニュー2
      
サブメニュー3
    
  

JavaScript(jQuery)

$(function(){
  $('.dropMenu > li').hover(
    function(){
      $(this).find('ul').slideDown();
    }, function(){
      $(this).find('ul').slideUp();
    }
  );
});

• メニュー（マウスカーソルをのせてください）
  • サブメニュー1
  • サブメニュー2
  • サブメニュー3

CSS3の場合

CSS3のtransitionを使用することにより、JavaScriptを使ったときと同じようなアニメーションを再現することができます。
transitionプロパティは、transition効果（時間的変化）をまとめて指定する際に使用します。
　transition: 0.6s;
は0.6s（0.6秒）をかけて変化するということを意味します。 従って、下記の記述はマウスオーバーしたときにサブメニューが0.6秒かけて高さ0pxから96pxに変化します。

CSS

.dropMenu > li > ul{
  height:0;
  overflow:hidden;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}
.dropMenu > li:hover > ul{
  height:96px;
}

• メニュー（マウスカーソルを合わせてください）
  • サブメニュー1
  • サブメニュー2
  • サブメニュー3

JavaScriptでのアニメーションよりも若干動きが滑らかになっているのが感じられるかと思います。
JavaScriptの場合だとマウスカーソルを乗せたり外したりを繰り返すとアニメーションが残ってしまうため、さらに細かな設定が必要になりますが、CSS3の場合はそういったことは起こりません。

その他のCSS3アニメーション

その他にもいくつかCSS3を利用したアニメーションを紹介します。
※下記のサンプルはボタンをクリック（タップ）した際にJavaScriptで対象の要素にクラス（start）を付与しています。

3D変形

transform:matrix3d()

要素に3D変形を適用する際に使用します。
詳しい設定の仕方は割愛しますが、下記のように要素を回転させるようなアニメーションを実現できます。

※ベンダープレフィックス等の記述は省略

.rotation{
  transform: matrix3d(0,0,-1.00,0.001,0.00,1,0.00,0,1,0,0,0,0,0,0,1);
  transition: 1.0s;
}
.rotation.start{
  transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
}

アニメーションスタート（クリック or タップ）

3D変形

フェードイン

opacity

要素の透明度を指定する際に使用します。
下記は、透明度0（非表示）から透明度1（表示）にする処理を行っています。

.fadeIn{
  opacity:0;
  transition: 1.0s;
}
.fadeIn.start{
  opacity:1;
}

アニメーションスタート（クリック or タップ）

フェードイン

要素の移動

transform:translate()

要素の表示位置を移動させる際に使用します。
下記は、初期表示位置を通常から右に50pxずらした位置に移動させ、通常の位置に戻す処理を行っています。

.slideIn{
  transform: translate(50px, 0);
  transition: 1.0s;
}
.slideIn.start{
  transform: translate(0,0);
}

アニメーションスタート（クリック or タップ）

右から左に移動

最近ではただ動くだけのアニメーションだけでなく、動作の速度を気にするようになってきました。
そういったときにCSS3を活用すると、ストレスを感じることなく操作をすることができるようになります。

ただし、CSS3の機能は便利ですが、CSS3だけで全てのアニメーションを実装することはできません。
用途や仕様に応じて、最適なものを選び、JavaScriptと組み合わせて使用することでよりよいものが作れるかと思います。