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

animation-delay プロパティ

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

　CSS アニメーションには、@keyframes によるアニメーションの定義と、その定義したアニメーションの名称を指定する必要があります。

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

@keyframes mymove {
	from {

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

　CSS アニメーションには、transition プロパティを使う方法もあります。

ページ内 Index

構文(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アニメーションを設定しています。

関連プロパティ

プロパティ概要
animationCSSアニメーションのプロパティを一括指定
animation-delay実行までの待ち時間
animation-direction再生/逆再生の設定。
animation-durationCSS animationの実行時間。
animation-fill-mode実行時間外の動作。
animation-iteration-count再生回数。
animation-name@keyframesセレクターで定義したCSS animation名。
animation-play-state実行/停止かの設定。
animation-timing-functionCSS animationの実行速度曲線。

関連（Related）