CSS3 transition Property

例

上にマウスを移動<div>徐々に300ピクセルに100pxにから幅を変更する要素：

div {
    width: 100px;
    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

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

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

定義と使用法

トランジションプロパティは4トランジションのプロパティの短縮形プロパティです。

遷移プロパティ、遷移期間、遷移タイミング機能、および遷移遅延。

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

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

ブラウザのサポート

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

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

プロパティ
transition	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 duration timing-function delay|initial|inherit;

プロパティ値

値	説明
transition-property	トランジションエフェクトの対象となるCSSプロパティの名前を指定します。
transition-duration	トランジションエフェクトが完了するまでの秒数またはミリ秒単位で指定します
transition-timing-function	トランジションエフェクトの速度曲線を指定します。
transition-delay	トランジションエフェクトが開始されたときに定義します
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

その他の例

例

とき<input type="text">徐々に250ピクセルに100pxにから幅を変更、フォーカスを取得しました。

input[type=text] {
    width: 100px;
    -webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
    transition: ease-in-out, width .35s ease-in-out;
}

input[type=text]:focus {
    width: 250px;
}