トランジションを指定するには？ - transitionの解説

トランジションを指定するには?

要素書式

transition: 【トランジション指定】 [, 【トランジション指定】...];

対応ブラウザ

IE 9：×
Firefox 10.0：○(-moz-transition)
Opera 11.61：○(-o-transition)
Chrome 17.0：○(-webkit-transition)
Safari 5.1：○(-webkit-transition)

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。

トランジション指定項目一覧

それぞれのトランジション指定は、スペースで区切られた、以下の項目で構成されています。すべて省略可能ですが、時間の値はこの順番で解釈されます。

カンマで区切って、複数のトランジション指定のセットを指定することもできます。

【transition-property】【transition-duration】【transition-timing-function】【transition-delay】

項目	内容
transition-property	トランジションさせるプロパティを指定する、transition-propertyプロパティの値を指定します。既定値はall。
transition-duration	トランジションに掛かる時間を指定する、transition-durationプロパティの値を指定します。既定値は0s。
transition-timing-function	トランジションの変化の仕方を指定する、transition-timing-functionプロパティの値を指定します。既定値はease。
transition-delay	トランジションの開始までの時間を指定する、transition-delayプロパティの値を指定します。既定値は0s。

解説文

特定の要素のCSSプロパティの値が、疑似クラス「:hover」や「:active」の適用などによって変更されるとき、既定では変更は瞬間的に反映されます。

トランジションは、こうした場合のプロパティの値の変化を、一定の時間をかけて徐々に行うようにする効果です。どのようにトランジションを行うかは、トランジションさせるプロパティを設定するには？、トランジションの再生時間を指定するには？、トランジションの補間方法を指定するには？、トランジションのディレイを指定するには？の各プロパティによって指定します。

transition-propertyプロパティは、トランジションの対象となるプロパティ名を指定します。既定値はall（すべてのプロパティ）です。

transition-durationプロパティは、元の値から新しい値になるまでに掛かる時間を指定します。既定値は0s（０秒）です。

transition-timing-functionプロパティは、経過時間に対しての変化の仕方を指定します。既定値はease（開始と終了付近では変化が滑らかになる）です。

transition-delayプロパティは、変化が始まるまでの待ち時間を指定します。ここで指定した時間が経過した後で、対象のプロパティの変化が開始されます。既定値は0s（０秒）です。

各指定の詳細は、それぞれの項目を参照してください。

transitionプロパティでは、スペース区切りで、これらのプロパティの値を一括して指定します。（短縮プロパティ）

値はすべて省略可能で、順序が前後しても構いませんが、時間指定は、つねに最初の値がtransition-durationプロパティの、次の値がtransition-delayプロパティの値として解釈されます。

以下では、:hover疑似クラスを使用して、マウスがボックスの上に来た時に、背景色を透明から緑へと、徐々に濃く表示させています。

この場合、適用対象プロパティ（transition-property）がbackground-color、変化に要する時間（transition-duration）が 5 秒（5s）、変化の仕方（transition-timing-function）が、均等（linear）、開始までの時間（transition-delay）が0秒（0s）になります。

div#output{
    background-color: rgba(0, 255, 0 , 0);
}

div#output:hover{
    background-color: rgba(0, 255, 0 , 1);
    transition: background-color 5s linear 0s; 
}

複数のプロパティのトランジションを一括して指定する場合は、以下のように、それぞれのプロパティに対するトランジションの指定を、カンマで区切って並べます。

div#output:hover{
    color: rgba(0, 255, 255 , 1);
    background-color: rgba(0, 255, 0 , 1);
    transition: background-color 5s linear 0s, color 3s ease 1s; 
}

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
     div#box{
         /* 変更前の値を指定します */
         width:200px;
         height:200px;
         font-size:2em;
         color:white;
         background-color:green;
     }
     div#box:hover{
         /* 変更後の値を指定します */
         font-size:4em;
         background-color:red;
         /* トランジションを指定します */
         transition:font-size 3s ease-out, background-color 5s linear; /* 標準 */
         -moz-transition:font-size 3s ease-out, background-color 5s linear; /* Firefox */
         -o-transition:font-size 3s ease-out, background-color 5s linear; /* Opera */
         -webkit-transition:font-size 3s ease-out, background-color 5s linear; /* Chrome, Safari */
     }
</style>
</head>
<body>
     <p>マウスをボックスに乗せると、徐々に文字列が拡大し、背景色が赤になります。</p>
     <div id="box">テキスト</div>
</body>
</html>

transitionの解説