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

animation-delayプロパティ

　animation-delayプロパティは、CSS animationの実行までの待ち時間を指定するプロパティです。
　マイナスを指定すると指定秒後から始まります。例えば、-2sと定義すると２秒後から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の例です。エレメントにマウスポインターをもっていくと１秒後にCSSアニメーションを開始します。

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