トランジションさせるプロパティを設定するには？ - transition-propertyの解説

トランジションさせるプロパティを設定するには?

要素書式

transition-property: 【プロパティ名】 [, 【プロパティ名】...];

対応ブラウザ

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

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

値一覧

値	内容
プロパティ名	トランジションさせるプロパティを指定します。カンマで区切って複数指定することが可能です。 noneを指定するとトランジションは適用されません。既定値はall（可能なすべてのプロパティをトランジションさせる）です。

解説文

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

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

transition-propertyプロパティには、トランジション効果を適用するプロパティを指定します。指定したプロパティ名のプロパティの値が動的に変更されると、他のトランジションを指定するプロパティ（トランジションの再生時間を指定するには？、トランジションの補間方法を指定するには？、トランジションのディレイを指定するには？）の値に基づいて、トランジションが行われます。

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

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

プロパティ名のリストに、無効なものが含まれていた場合でも、その対応する順番の指定が無効になるだけで、順番そのものが前に詰められたりはしません。

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

transition-propertyの解説