CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 transition-delay 属性 CSS3 transform-style 属性

CSS3 transition 属性の使用方法と例

transition CSS属性は、要素が二つの状態効果間で変換を行うことを定義できます。これはtransition-property、transition-duration、transition-timing-functionおよびtransition-delayのショートカット属性

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプト内での属性の使用方法を示しています。

デフォルト値：	all 0 ease 0; すべての属性を表示
適用：	すべての要素::beforeおよび::after 疑似要素
継承：	ありません
アニメーションを作成可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript構文：	object.style.transition="width 2s"

transitionの使用構文

この属性の構文は以下の通りです：

transition:　transition1　,　transition2,　...　transitionN]　|　initial　|　inherit
　　　　　　　　　　　　where　transition　is:　[　transition-property　|　transition-duration　|　transition-timing-function　|　transition-delay　]

以下の例では、transition属性の使用方法を示しています。

例

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition-property:　background　2s;　/*　For　Safari　3.0+　*/
　　　　transition:　background　2s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

試してみる‹/›

属性値

以下の表はこの属性の値を説明しています。

値	説明
transition-property	过渡効果を適用するべきCSS属性の名前を指定します。
transition-duration	过渡アニメーションが完了するまで必要な秒数またはミリ秒数を指定します。
transition-timing-function	过渡に影響を受けるCSS属性の中間値を計算する方法を指定します。
transition-delay	过渡を開始するタイミングを指定します。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtransitionの属性値を使用します。

ブラウザ互換性

transition属性のブラウザの互換性について、以下の表の数字はこの属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 4+ ^-moz-、16 + Google Chrome 4+ ^-webkit-、26 + Internet Explorer 10+ Apple Safari 3。1+ ^-webkit-、6。1+ Opera 10。5+ ^-o-、12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSS3 Transitions。

CSS3 transition-delay 属性 CSS3 transform-style 属性