CSS3 transition-property Property

例

カーソルを合わせ<div>要素を、スムーズなトランジション効果と幅を変更します。

div {
    -webkit-transition-property: width; /* Safari */
    transition-property: width;
}

div:hover {
    width: 300px;
}

»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

遷移propertyプロパティは、トランジションエフェクトの対象となるCSSプロパティの名前を指定します(the transition effect will start when the specified CSS property changes) 。

Tip:ユーザーが要素の上に置くと、トランジション効果は、一般的に発生する可能性があります。

Note:必ず遷移durationプロパティを指定し、それ以外の期間は0であり、遷移が効果がありません。

デフォルト値：	all
継承されました：	no
アニメーション：	no. Read about animatable
バージョン：	CSS3
JavaScriptシンタックス：	object .style.transitionProperty="width,height" Try it

ブラウザのサポート

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

-webkit-が続く数字、-moz-または接頭辞で働いていた最初のバージョンを指定して-O-です。

プロパティ
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -O-

CSSの構文

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

プロパティ値

値	説明
none	いいえプロパティは、トランジション効果を得られないだろう
all	デフォルト値。すべてのプロパティは、トランジション効果を取得します
property	トランジションエフェクトの対象となるCSSプロパティ名のカンマ区切りリストを定義します
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

その他の例

例

カーソルを合わせ<div>要素を、スムーズなトランジション効果で幅と高さを変更します。

div {
    -webkit-transition-property: width, height; /* Safari */
    transition-property: width, height;
}

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