CSSトランジションプロパティプロパティ

<div>要素にカーソルを合わせ、スムーズな遷移効果で幅を変更します。

div {
transition-property: width;
}

div:hover {
width: 300px;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このtransition-propertyプロパティは、遷移効果の対象となるCSSプロパティの名前を指定します（指定されたCSSプロパティが変更されると、遷移効果が開始されます）。

ヒント：遷移効果は通常、ユーザーが要素にカーソルを合わせたときに発生する可能性があります。

注：transition-durationプロパティは常に指定してください。指定しない場合、durationは0になり、遷移は効果がありません。

デフォルト値：	全て
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.transitionProperty = "width、height"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition-property: none|all|property|initial|inherit;

Value	Description
none	No property will get a transition effect
all	Default value. All properties will get a transition effect
property	Defines a comma separated list of CSS property names the transition effect is for
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<div>要素にカーソルを合わせ、スムーズな遷移効果で幅と高さを変更します。

div {
transition-property: width, height;
}

div:hover {
width: 300px;
height: 300px;
}