CSS animation-delayの使い方｜開始遅延と負の値・複数アニメ

▶

編集

この記事の要点

animation-delay は CSS アニメーションを何秒遅らせて開始するかを指定するプロパティ
値は時間（s 秒 / ms ミリ秒）。既定値は 0s
負の値を指定するとアニメーションが途中から開始される（既に N 秒経過したものとして扱われる）
複数アニメーションをカンマ区切りで指定する場合、animation-delay も同じ順序で対応
animation 一括指定の中では duration の後ろにある時間値が delay として解釈される

animation-delay プロパティとは

animation-delay は CSS アニメーションがいつ開始されるかを制御するプロパティです。要素にアニメーションを適用してから、実際にキーフレームが動き始めるまでの待ち時間を秒またはミリ秒で指定します。

基本構文

セレクタ {
  animation-delay: 時間;
}

/* 例 */
.fadein     { animation-delay: 0.5s; }
.late-start { animation-delay: 1500ms; }

指定できる値

値	意味	例
正の時間	その時間だけ開始を遅らせる	`2s` / `500ms`
`0` / `0s`	遅延なし（既定値）	`0s`
負の時間	途中から開始（既に経過したものとみなす）	`-1s`

負の値で「途中から始める」テクニック

負の animation-delay は CSS アニメーションの中でも特に重要なテクニックです。アニメーションが既に N 秒間進行した状態として開始されるため、複数要素を時間差で動かしつつ既に動き始めた状態に見せられます。

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.dot1 { animation: spin 2s linear infinite; animation-delay: 0s;   }
.dot2 { animation: spin 2s linear infinite; animation-delay: -0.5s; }
.dot3 { animation: spin 2s linear infinite; animation-delay: -1s;   }
.dot4 { animation: spin 2s linear infinite; animation-delay: -1.5s; }

負の delay はローディングインジケータの位相差やパーティクル風の表現でよく使われるテクニックです。

複数アニメーションへの適用

カンマ区切りで複数のアニメーションを並べた場合、animation-delay も同じ順序でカンマ区切りで指定します。

.elem {
  animation-name:     fade,  slide;
  animation-duration: 1s,    2s;
  animation-delay:    0s,    0.5s;
}

delay の個数が name より少ない場合は、足りない分は最初から繰り返されます（0s, 0.5s しか書かなくても name が 4 つあれば 0s, 0.5s, 0s, 0.5s として処理）。

animation 一括指定での書き方

ショートハンドの animation プロパティでは、duration の後ろに登場する時間値が delay として扱われます。

.elem {
  animation: fade 1s ease 0.5s 3 normal;
  /*         name dur ease delay count direction */
}

順序が重要なので、慣れないうちは個別プロパティで書く方が間違いがありません。

delay と iteration-delay の違い

animation-delay は最初の 1 回目の前の待ち時間だけに効きます。繰り返し再生のたびに毎回挟みたい場合は、キーフレーム内で「最後の数 % を停止状態」にする小細工が必要です。

@keyframes blink {
  0%, 50%   { opacity: 1; }   /* 前半: 表示 */
  60%, 100% { opacity: 0; }   /* 後半: 非表示 = 視覚的に休憩 */
}
.elem { animation: blink 2s infinite; }

transition-delay との違い

項目	animation-delay	transition-delay
対象	@keyframes による定期アニメーション	プロパティ変化（hover など）
負の値	途中から開始	無視される（即時開始）
トリガ	要素マウント時 or クラス追加時	プロパティ変化時

JavaScript からの取得 / 設定

const el = document.querySelector('.elem');

// 取得
const delay = getComputedStyle(el).animationDelay; // '0.5s'

// 設定
el.style.animationDelay = '1.5s';

子要素を順番に登場させる UI

リストや fadeIn のスタッガード（順次表示）表現は :nth-child と animation-delay の組み合わせが定番です。

@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.list li {
  opacity: 0;
  animation: fadein 0.4s ease forwards;
}
.list li:nth-child(1) { animation-delay: 0.1s; }
.list li:nth-child(2) { animation-delay: 0.2s; }
.list li:nth-child(3) { animation-delay: 0.3s; }
.list li:nth-child(4) { animation-delay: 0.4s; }

項目数が多い場合は CSS カスタムプロパティと組み合わせて、HTML 側で style="--i:3" のように渡すと簡潔に書けます。

.list li { animation-delay: calc(var(--i) * 0.1s); }

animation-fill-mode との合わせ技

delay 中の要素はキーフレーム適用前の状態で表示されます。「最初は完全に消しておきたい」場合は animation-fill-mode: backwards または both を指定します。

.elem {
  opacity: 1;
  animation: fadein 1s ease 1s backwards;
  /* delay 中も from の状態 (opacity: 0) を保つ */
}

delay と prefers-reduced-motion

長い delay やループアニメは、動きに敏感なユーザにとって不快な場合があります。OS の「視差効果を減らす」設定を尊重するメディアクエリで丸ごと止めるのが現代的な作法です。

@media (prefers-reduced-motion: reduce) {
  .elem {
    animation: none;
  }
}

ページ一覧

その他