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;
}