タイトル: animation-delayプロパティ
SEOタイトル: CSS animation-delay プロパティ完全ガイド（開始遅延 / 負の値 / 複数アニメ / animation 一括指定での書き方）
| この記事の要点 |
|
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;
}
}