CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 animation-direction 属性 CSS3 animation 属性

CSS3 animation-delay属性の使用方法および例

　CSSアニメーション-delay属性は、アニメーションがいつ再生を開始するかを定義します（例：値が2秒、このアニメーションは適用後2秒から再生を開始します）。この属性の値は、秒（s）またはミリ秒（ms）で指定できます。

以下の表は、この属性の使用状況とバージョン履歴をまとめています。

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

animation-delayの使用構文

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

animation-delay:　time　|　initial　|　inherit

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

例

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　4s;
　　　　-webkit-animation-delay:　2s;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　4s;
　　　　animation-delay:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

テストを見て‹/›

注意：この属性は負の値を使用できますが、アニメーションのサイクルの中間で実行を開始するようです、例えば、-2sのアニメーション遅延はアニメーションが開始する直前に即座にアニメーションを開始しますが、2秒後に実行を開始します。

属性値

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

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

ブラウザの互換性

animation-delay属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 5+ ^-moz-，15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-, 15+ ^-webkit-

さらに詳しく

以下のチュートリアルを参照してください：CSS3アニメーション。

CSS3 animation-direction 属性 CSS3 animation 属性