CSS3

プロパティ

animation-delay

→● mdn

アニメーションを開始する時間。

animation-delay プロパティは、アニメーションがいつ開始することになるかを定義する。これは、アニメーションを、それが適用された時点から ある時間だけ経過した後に始めさせたり、あるいは、その時点より ある時間だけ前の時点ですでに実行が始まっていたかのように現れさせる。

以下のCSSが組み込んであります：

<time> ○

アニメーションの開始（これらのプロパティを通してアニメーションが適用される時点）から、その実際の開始までの遅延の長さを定義する。遅延 0s（初期値）は、アニメーションが適用され次第、その実行を開始させることを意味する。

負な遅延も妥当である。遅延 0s と同様に、それは、アニメーションを即時に実行に移すことを意味するが、アニメーションは遅延の絶対値の分だけ進捗され、指定された時間だけ過去の時点ですでに開始されていたかのように ― すなわち、その作動時間の中途から開始されるように ― 現れさせる。アニメーションの開始時の値を与える keyframe が、暗黙の値をとる場合、その値は、過去の時点ではなく、アニメーションが開始した時点から得られる。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-delay:3s;
  animation-duration:5s;
 "></DIV>
</DIV>

3秒後に動作開始。

テスト