備忘録的プログラミングリファレンス

animation-delayプロパティ

 animation-delayプロパティは、CSS animationの実行までの待ち時間を指定するプロパティです。
 マイナスを指定すると指定秒後から始まります。例えば、-2sと定義すると2秒後からCSS animationが始まります。

 CSSアニメーションには、アニメーションの定義とエレメントにおけるその定義したアニメーションの名称を指定する必要があります。

CSSアニメーション実行の待ち時間(Exampleを参照
.class	{
	animation-delay: 1s;
	animation-name: mymove;
}

@keyframes mymove {
	from {

	}
	to {
		box-shadow: 10px 10px;
	}
}
	

 transitionプロパティを使う方法もあります。

構文(Syntax)

CSS

animation-delay: [ time | initial | inherit ];

DOM(JavaScript)

値の取得
 object.style.animationDelay
値の設定
object.style.animationDelay = "[ time | initial | inherit ]"

値(Values)

Value摘要
none初期値(default値)。
time0。単位は"s"または"ms"。マイナスも設定できる。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)0
継承(Inherited)no
変化(Animatable)no

Example

 animation-delayの例です。エレメントにマウスポインターをもっていくと1秒後にCSSアニメーションを開始します。

 ここでは疑似クラス:hoverにCSSアニメーションを設定しています。