クリエイターのためのWebテク講座 -CSS3のtransitionプロパティを使ってみよう。

「HTML5」という単語は、みなさんよく耳にすると思います。しかし、HTMLと同時進行で策定さている「CSS3」に関しては、あまりなじみが無い方もいるのではないでしょうか? そこで、今回から、CSS3の「transitionプロパティ」を使って、FlashやAjaxで実装するようなインタラクティブなUIの実装について解説していきたいと思います。

まずは、簡単なプルダウンから作ってみよう。

サンプルを見る

サンプルは、簡単なプルダウンを作成しました。このサンプルは、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。

さて、今までの感覚だと、こういったUIを実現するには、jQueryのプラグインを使うか、jQueryや、その他のフレームワークを使ってスクラッチで記述するのが普通でした。ただ、これらの方法で実装する場合、配布されているライブラリを使うと、ライブラリに無い機能の実装や細かいカスタマイズが難しかったり、スクラッチで記述するとなると、それなりのスキルが必要になってきます。

また、もう一つの問題として、jQueryなどで実装したアニメーションは、スマートフォンでは、かなりパフォーマンスが落ちてしまいます。

そこで、「transitionプロパティ」を使って実装するのです。

「transitionプロパティ」は、CSSだけでアニメーション効果を実現するためのプロパティです。 jQueryなど、JavaScriptでアニメーションの値を計算するのではなく、ブラウザ側で演算するので、総じてJavaScriptでアニメーションさせるよりも高速に動作します。また、CSSの記述と、簡単なJavaScriptの記述だけで動作するので、スクラッチで実装する場合も、JavaScriptだけで実装するよりも簡単になります。

それでは百聞は一見にしかず、早速ソースコードを解説していきます。

全コードはHTMLのソースを表示すればいいので、ここでは抜粋して解説します。まず<body>と<style>の記述です。

<style>
#box
{
    width:140px;
    height:40px;
    background:#CCC;
    color:#FFFFFF;
    overflow:hidden;

    -webkit-transition-property:height;
    -webkit-transition-duration:500ms;
    -webkit-transition-timing-function:ease-out;

    -moz-transition-property:height;
    -moz-transition-duration:500ms;
    -moz-transition-timing-function:ease-out;

    transition-property:height;
    transition-duration:500ms;
    transition-timing-function:ease-out;
}

#btn
{
    cursor:pointer;
}

#box p
{
    margin:0;
    padding-top:10px;
    padding-left:10px;
}
</style>
</head>

<body>
<div id="box">
    <div id="boxInner">
        <p id="btn">クリック</p>
        <p><a href="#">プルダウン1</a></p>
        <p><a href="#">プルダウン2</a></p>
        <p><a href="#">プルダウン3</a></p>
        <p><a href="#">プルダウン4</a></p>
        <p><a href="#">プルダウン5</a></p>
    </div>
</div>
</body>

プルダウン全体を、<div id="box">内に記述し、「#box」の初期値として、「height:40px;」「overflow:hidden;」を設定し、<p id="btn">クリック</p>より下を見えないようにしています。

次に、プルダウンの中を<div id="boxInner">に記述します。この<div id="boxInner">は、一見必要無さそうに見えますが、ここに関しては、次のJavaScriptの実装において必要になります。

CSSで、アニメーションを設定しているのは下記の6行です。

-webkit-transition-property:height;
-webkit-transition-duration:500ms;
-webkit-transition-timing-function:ease-out;

-moz-transition-property:height;
-moz-transition-duration:500ms;
-moz-transition-timing-function:ease-out;

transition-property:height;
transition-duration:500ms;
transition-timing-function:ease-out;

ここでは6行書かれていますが、実際には、上3行、真ん中3行、下3行は同じ記述になっています。各プロパティの頭についている「-webkit-」「-moz-」の記述はベンダープリフィックスと言って、W3Cで未だ確定していないプロパティを、各ブラウザベンダーが独自に実装したプロパティに対して記述します。

もちろん、W3Cによって勧告されたものに関しては、ベンダープリフィックスは将来的には不要になります。そうなった場合、ベンダープリフィックスがついてると動作しなくなる可能性がるため、将来のためにベンダープリフィックスを消したものも記述します。

それでは「transitionプロパティ」について解説します。

「transitionプロパティ」は、「プロパティに変更があった場合のアニメーション」を定義するプロパティになります。今回のプルダウンの例で言うと、「高さが40pxの要素の高さを、JavaScriptで変更したとき」のアニメーションを定義しています。

「transitionプロパティ」で設定する各種値は

・transition-property：アニメーションの対象になるプロパティを指定。
・transition-duration：アニメーションの時間、秒かミリ秒で指定。
・transition-timing-function：アニメーションする際の加減速

となります。今回のサンプルでは、「transition-property」に「height」を指定しているので、高さが変化した際にアニメーションするという訳です。また「transition-duration」には、「500ms」を指定しています。単位を「ms」にするとミリ秒（100分の1秒単位）なので、ここでは「0.5秒」ということになります。単位を「s」とした場合は、秒になるので、「1s」とすると「1秒」ということになりますね。次に、「transition-timing-function」に記述する値ですが、下記のようになります。

・ease：ゆっくりはじまり、ゆっくり終わる。
・linear：一定の速度でアニメーションする。
・ease-in：ゆっくりはじまり、後半加速する。
・ease-out：はじめ速くて、後半減速してゆっくり終わる。
・ease-in-out：ゆっくりはじまり、ゆっくり終わる。加減速が、easeよりもちょっときつめ。
・cubic-bezier(数値, 数値, 数値, 数値)：ベジェ曲線で独自のアニメーションを指定できる。

今回は「ease-out」を指定しているので、CSSの記述の意味は「#boxのheightが、JavaScriptによって変更されたら、0.5秒で、初めは速く、減速しながらアニメーションする。」という意味になります。

それでは、JavaScriptの実装を解説しましょう。とは言ってもこれだけです。

<script>
var boxH;

$(function ()
{
    boxH = $("#boxInner").height();

    $("#btn").toggle(
        function()
        {
            $("#box").css("height", boxH + 10 + "px");
        },
        function()
        {
            $("#box").css("height", "40px");
        }
    );
});
</script>

「$(function (){});」内の記述で、ドキュメントが実行可能になったら、最初に「#boxInner」の高さを取得します。ここで、プルダウンの中を<div id="boxInner">に記述した意味が出てくるのです。

後は、「#btn」にjQueryの「toggleメソッド」で、クリックしたときの挙動を記述します。

「toggleメソッド」は、対象の要素がクリックされたときに、第1引数で指定されたメソッドと、第2引数で指定されたメソッドを交互に実行します。ここでは、「boxInnerにマージン分を足した高さ」に変更するメソッドと、「boxInnerを、#btnだけが表示される高さ（40px）」に変更するメソッドを交互に実行するわけです。

これで、「height」に変更がある度に、アニメーションが実行されるのが確認できると思います。 「transition-property」や「transition-timing-function」を色々変えてみたりして遊んでみてください。

まぁ、実際にはjQueryだけで記述しても、今回程度のものであれば同様に単純な記述になるはなります。ただ、「transitionプロパティ」を使うことで、「プロパティの変更と、アニメーションの定義を分けることが出来る」ので、大規模なサイトになってくると、管理面で有利になります。また「スマートフォンでのパフォーマンスが上がる」というアドバンテージも大きいでしょう。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。

クリエイター向け転職・派遣情報サイト「マイナビクリエイター」より転載