【CSS3】 transition を使ってアニメってみた。

CSS3ではアニメーションも表現できるようだ。ということで、遅まきながらやってみた。

CSS3でアニメ関連のプロパティには、transition と animation があるらしい。今回は手始めに transition を使ってみる。animation についてはまた今度調べる。

transition は、次の書式で記述する。

transition: [プロパティ] [時間] [タイミング];

これは実際は、transition-property(プロパティ) transition-duration(時間) transition-timing-function(タイミング)の3つのプロパティのショートハンドのようだ。

マウスオーバーで文字色を変えてみる

まず、簡単に『マウスがhoverすると3秒かけて文字色が赤になるリンク』を実装。ここでは:hover擬似要素をトリガーに使ってみた。

• 実装サンプル：transition1.html

<style type="text/css">
  a{
    color:#0000ff;
            transition:color 3s ease-in-out;
       -moz-transition:color 3s ease-in-out;
    -webkit-transition:color 3s ease-in-out;
         -o-transition:color 3s ease-in-out;
        -ms-transition:color 3s ease-in-out;
  }
  a:hover{
    color:#ff0000;
  }
</style>
<a href="#">テストリンク</a>

例によって、策定中の仕様なので、全主要ブラウザのベンダープレフィックスはつけてみている。

このリンクにマウスポインタを重ねると、徐々に赤い文字色に変化していく。マウスポインタをはずしたときも、同様に3秒かけて青に戻るようだ。

transition-timing-function(タイミング)の種類を試す

transition-timing-function には、下記のようないくつかの種類があるようだ。

• ease(既定)
• ease-in
• ease-out
• ease-in-out
• cubic-bezier()
• linear

変化がわかりやすいように、要素を移動させるサンプルを作成してみた。

• 実装サンプル：transition2.html

この例では、擬似要素ではなくJavaScriptを使って終点を変化させた。

transition では、Flashでいうトゥイーンのような効果を得られるようだ。現在の値を始点、変化させた値を終点として、その途中を滑らかにつなぐ。これでアニメーションを発生させる仕組みだ。

旧来のJavaScriptだけでアニメーション処理を施す方法だと、途中の通過点の値はJavaScriptで自前で計算、設定する必要があり、複雑だし処理も重くなる。transitionはブラウザがネイティブに提供する機能なので、JavaScriptよりは処理をスムーズにできるだろう。逆に、処理スペックの低い端末は、アニメーション処理をスキップするなり、多少カクカクな動きにして軽量化するなりと、それぞれに最適なプレゼンテーションをブラウザ側で工夫できるようにもなるだろう。

動きのパターンについて、1つだけよくわからなかったのが cubic-bezier()。こちらのページによると、「ベジェ曲線で変化を指定」と説明されており、括弧の中に数字を入れて使うようだ。

.cubic-bezier {
    transition-timing-function: cubic-bezier(0,1,1,0);
}

このカラクリについては、また今度調べる。

複数のプロパティを操作

transitionは、カンマで区切って複数の指定を登録できるようだ。書式は次のような感じ。

transition:
   [プロパティ] [時間] [タイミング] ,
   [プロパティ] [時間] [タイミング] ,
   [プロパティ] [時間] [タイミング]
;

左上と右下を行き来するような要素を実装してみた。

<style type="text/css">
  #sample1{
            transition:background-color 2s ease, left 2s ease, top 2s ease-in-out, color 2s ease;
       -moz-transition:background-color 2s ease, left 2s ease, top 2s ease-in-out, color 2s ease;
    -webkit-transition:background-color 2s ease, left 2s ease, top 2s ease-in-out, color 2s ease;
         -o-transition:background-color 2s ease, left 2s ease, top 2s ease-in-out, color 2s ease;
        -ms-transition:background-color 2s ease, left 2s ease, top 2s ease-in-out, color 2s ease;
  }
</style>
<div id="sample1">サンプル</div>

• 実装サンプル：transition3.html

当然かもしれないが、書いた順に直列処理されるわけではなく、全部が同時に並列処理されるようだ。

対応ブラウザ

このサンプルを試してみたブラウザを列記してみる。

サイトによっては、Firefoxはベンダープレフィックスをつければ使えそうな雰囲気もあるのだが、このサンプルは3.6系でも動かなかった。他に必要な何かでもあるのかな？

ただし、CSS3はまだ策定中段階なので、実装されてなかったりバグがあったりしても当たり前といえば当たり前だし、今後仕様が変更される可能性もあるのでご注意を。

参考にさせていただいたページを下記に列記。

• transition (CSS 3) - Template Style
• css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
• CSS3メモ「transition」の使い方｜Coder's Note