CSS transition-property 属性

定義と使用法

transition-property 属性は、トランジション効果を適用する CSS 属性の名前を指定します。（指定された CSS 属性が変更されたときに、トランジション効果が開始されます）。

ヒント：トランジション効果は通常、ユーザーがマウスカーソルを要素に浮かせたときに発生します。

注釈：常に設定してください transition-duration 属性が設定されていない場合、時間は0秒で、トランジション効果は発生しません。

また参照してください：

CSS チュートリアル：CSS 过渡

HTML DOM リファレンスマニュアル：transitionProperty 属性

例

div要素にマウスカーソルを合わせると、要素の幅を滑らかに変更するトランジション効果が発生します：

div {
  transition-property: width;
}

自分で試してみる

CSS 文法

transition-property: none|all|property;

属性値

値 説明
none トランジション効果を受け取る属性はありません。
all すべての属性はトランジション効果を受け取ります。
property 適用されるトランジション効果の CSS 属性名のリストを定義します。リストはカンマで区切ります。

技術的詳細

デフォルト値： all
継承性： no
バージョン： CSS3
JavaScript 文法： オブジェクト.style.transitionProperty="width,height"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

「-webkit-」、「-moz-」または「-o-」で始まる数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-