CSS 参考手引

CSS @規則(RULES)

CSS 属性全書

CSS3 transition-duration 属性 CSS3 transition 属性

CSS3 transition-delay 属性の使用方法と例

transition-delay CSS属性は変換がいつ始まるかを定義します（例えば、一つの2s値はアプリケーションで変換が行われることを示します2秒後に始まる)。この属性の値は秒またはミリ秒で指定できます。

以下のテーブルは、この属性の使用方法とバージョン履歴、javascriptスクリプトでの使用文法を説明しています。

デフォルト値：	0s
適用範囲：	すべての要素::beforeおよび::after 仮想要素
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの文法：	object.style.transitionDelay="3s"

transition-delayの使用文法

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

transition-delay:　time　|　initial　|　inherit

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

例

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

テストを見て‹/›

注意：この属性は負の値を指定することもできますが、それは过渡の周期の中間で実行されているようです、例えば、-2sのtransition delayは、transitionがすぐに始まることを意味しますが、transitionが始まった後2秒から始まる。

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
time	この属性の値は、过渡が開始される前に待つ必要がある秒数またはミリ秒数を定義します。デフォルト値は0sです。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtransitionを使用します。-delayの属性値。

ブラウザ互換性

transition-delay属性のブラウザの互換性を確認してください、以下のテーブルには、この属性をサポートするブラウザの最低バージョンが示されています；すべての主要ブラウザはこの属性をサポートしています。

	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-duration 属性 CSS3 transition 属性