トランジションの再生時間を指定するには？ - transition-durationの解説

トランジションの再生時間を指定するには?

要素書式

transition-duration: 【時間】 [, 【時間】...];

対応ブラウザ

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

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

値一覧

値	内容
時間	トランジションの開始から終了までの時間を指定します。カンマで区切って複数指定することが可能です。既定値は0s（０秒、トランジションの効果なしにすぐに変化する）です。

解説文

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

トランジションは、こうした場合のプロパティの値の変化を、一定の時間をかけて徐々に行うようにする効果です。

transition-durationプロパティには、トランジションの開始から終了までに掛かる時間を指定します。

トランジションに掛かる時間は、カンマで区切って複数指定することができます。その場合、トランジションを指定するには？プロパティの、対応する順番に指定されたプロパティが、それぞれの値の適用される対象となります。

例えば、transition-propertyプロパティで、カンマ区切りで２番目に指定したプロパティに適用されるトランジションに掛かる時間は、transition-durationプロパティで、カンマ区切りで２番目に指定した値の長さになります。

負の値が指定された場合は、0 が指定されたものとみなされます。

以下の例では、colorプロパティに 3 秒のトランジションを指定し、background-colorプロパティには 5 秒のトランジションを指定しています。

transition-property:color, background-color; 
transition-duration:3s, 5s;

サンプルソース

<!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;
         color:blue;
         background-color:red;
         
         /* 標準 */
         
         /* トランジションさせるプロパティを指定します */
         transition-property:font-size , color, background-color; 
         /* トランジションに掛かる時間を指定します */
         transition-duration:3s, 2s, 5s;
         
         /* Firefox */
         
         -moz-transition-property:font-size , color, background-color; 
         -moz-transition-duration:3s, 2s, 5s;
         
         /* Opera */
         
         -o-transition-property:font-size , color, background-color; 
         -o-transition-duration:3s, 2s, 5s;
         
         /* Chrome, Safari */
         
         -webkit-transition-property:font-size , color, background-color; 
         -webkit-transition-duration:3s, 2s, 5s;
     }
</style>
</head>
<body>
     <p>マウスをボックスに乗せると、徐々に文字列が青へと変化し、拡大して、背景色が赤になります。</p>
     <div id="box">テキスト</div>
</body>
</html>

transition-durationの解説