CSS3 Transitionでアニメーションさせてみる。

css

ここ最近CSS3だけでの表現力もすごくなってきたので、そろそろ見ておこうと思ってメモ。
CSS3のtransitionには、「animation」と「transition」があるんですが、今回は「transition」のほうで。

transitionのプロパティ

記述方法は各プロパティを書いていく方法と省略してまとめて各方法の2種類がある。
＊現時点のブラウザではベンダー プレフィックスをつけないと動作しないものもあるので記述するが今回はとりあえずベンダー プレフィックスをつけないで書きます。

とりあえずは、div.moveという要素をマウスオーバーしたら背景色を変える場合の例

div.move{
 width:100px;
 height:100px;
 background-color:#ccc;
 /*ここからアニメーションの設定*/
 transition-property:background-color;
 transition-duration:0.5s;
transition-delay:0.5s;
 transition-timing-function:ease-out;
}

まずは、各プロパティごとに書いて見た。

  • transition-property：トランジッションさせるcssのプロパティを指定する。初期値はallになっていて、アニメーショに対応しているプロパティすべてに設定できる。
  • transition-duration変化させるスピード。1sだと1秒になる。
  • transition-delay：トランジッションの実行を遅らせる遅延効果。
  • transition-timing-function：トランジッションで変化させる種類。＊下記
    　　　　

    • linear：一定のスピード
    • ease-in：加速していく
    • ease-out：減速していく
    • ease-in-out：加減速させる
    • cubic-bezier() 4つの数字をカンマ区切りで指定でカーブさせる。

      • 　　　　　

    　　　　　

といった感じなんですが、まぁなんとなくpropertyとかdurationとか分りますｗ
さて、もちろんこのままだとtransitionしてくれません。transitionした後の状態（ロールオーバーの状態）をCSSで指定してやります。

div.move:hover{
/* ロールオーバーで背景色を黒にする。  */
background-color:#000;
}

といった具合に設定すれば大丈夫です。これで終わりなんですが、他にも設定の方法があります。

Transitionの記述方法

トランジッションさせるcssのプロパティを複数指定する場合

例えば、背景色とdiv要素の幅の2つのプロパティを変化させる場合は、「,」で区切って指定する。もちろんそれぞれスピードを変えたい場合もdurationを「,」で区切ればいい。＊区切られてなければ同じスピードになる。

div.move{
 width:100px;
 height:100px;
 background-color:#ccc;
 /*ここからアニメーションの設定*/
 transition-property:background-color,width;
 transition-duration:3s,0.5s;
 transition-timing-function:ease-out,linear;
}

div.move:hover{
/* ロールオーバーで背景色を黒にして幅を300pxにする  */
background-color:#000;
width:300px;
}

省略してtransitionを記述する場合

省略してtransitionを記述する場合は「cssのプロパティ」「スピード」「遅延効果」「transtionの変化」をスペースを空けて書く。

div.move{
 width:100px;
 height:100px;
 background-color:#ccc;
 /*ここからアニメーションの設定*/
 transition:background-color 3s 0.5s linear;
}

div.move:hover{
/* ロールオーバーで背景色を黒にして幅を300pxにする  */
background-color:#000;
width:300px;
}

また省略して複数のプロパティを指定したい場合は「,」でtransitinoを繋げて記述する、

div.move{
 width:100px;
 height:100px;
 background-color:#ccc;
 /*ここからアニメーションの設定*/
 transition:background-color 3s 0.5s linear,width 1s ease-in;
}

div.move:hover{
/* ロールオーバーで背景色を黒にして幅を300pxにする  */
background-color:#000;
width:300px;
}

パターンをまとめたサンプル

参考になったサイトは「Internet Explorer ブログ (日本語版)」

THE HAM MEDIA BLOG:CSS3のtransitionプロパティでアニメーションを試してみた

簡単なサンプルでいくつかパターンを作ってみた。

2012-05-17 2nd – jsdo.it – share JavaScript, HTML5 and CSS