animation-delay：アニメーションが開始するタイミングを指定する

初期値 0s
適用対象 全ての要素、擬似要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

animation-delayプロパティの説明

CSSのanimation-delayプロパティは、CSSのアニメーションが開始するタイミングを指定します。この値は、単位付きの正数または負数、あるいは0でなければなりません。

アニメーション関連のプロパティを一括で制御する場合は、animationを使用して下さい。

animation-delayに指定できる値

<time>
アニメーションが要素に適用されてから開始するまでの時間を指定します。この値には、0か正数または負数を与えます。単位は必須で、秒（s）かミリ秒（ms）を使用します。animationによる一括指定では、同じ単位付きの数値であるanimation-durationよりも後に書かなければなりません。
  • 0s：アニメーションは要素に適用され次第、すぐに開始します。これが初期値です。
  • 正数：要素に適用されたアニメーションは、この値の時間が経過した後に開始します。
  • 負数：要素に適用されたアニメーションは、この値の時間が経過したものとみなした時点からすぐに再生を開始します。

animation-delayの使い方とサンプルコード

animation-delayプロパティの構文は以下の通りです。

/* 初期値 */
animation-delay: 0s;

/* 正数値 */
animation-delay: 1s;
animation-delay: 10s;
animation-delay: 100ms;

/* 負数値 */
animation-delay: -1s;
animation-delay: -10s;
animation-delay: -100ms;

/* 複数の値を指定 */
animation-delay: 3.4s, 680ms;

/* グローバル値 */
animation-delay: inherit;
animation-delay: initial;
animation-delay: revert;
animation-delay: unset;

animation-delayの実例

それでは簡単な例を見てみましょう。同じ内容のアニメーションに対して、開始タイミングだけを変えた場合は、以下の挙動となります。

<div class="samp_box">
	<div id="ad_1">0s</div>
	<div id="ad_2">3s</div>
	<div id="ad_3">-3s</div>
</div>
.samp_box > div {
	margin-top: 10px;
	width: 50px;
	background: #ccc;
	text-align: center;
	animation-name: as_move;
	animation-duration: 5s;
	animation-timing-function: steps(5);
	animation-iteration-count: infinite;
}
@keyframes as_move {
	from { margin-left: 0%;}
	to { margin-left: 80%;}
}
#ad_1 {
	animation-delay: 0s;
}
#ad_2 {
	animation-delay: 3s;
}
#ad_3 {
	animation-delay: -3s;
}

animation-delayに関連するCSSプロパティ

アニメーション
animation アニメーションに関する指定をまとめて行う
animation-name アニメーションの名前を定義する
animation-duration アニメーションの再生一回分の時間の長さを指定する
animation-timing-function アニメーションの再生タイミングに変化を付ける
animation-delay アニメーションが開始するタイミングを指定する
animation-iteration-count アニメーションの繰り返し回数を指定する
animation-direction アニメーションの再生方向を指定する
animation-fill-mode アニメーションが再生されていない時にどのような状態で待機するかを指定する
animation-play-state アニメーションを再生させるか一時停止させるか指定する
© weblan3.com