animation-delay・とは？初心者が知っておくべき使い方と活用例共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

animation-delay・とは？

CSS の世界にはアニメーションを作るためのいろいろな設定があります。その中の animation-delay は、アニメーションが始まるまでの待ち時間を決めるとても重要なプロパティです。animation-delay を使うと、同じアニメーションを複数の要素に順番に開始させたり、ユーザーの操作を待ってからアニメーションを動かしたりと、表現の幅が広がります。

通常は、animation-name、animation-duration、animation-timing-function などと一緒に設定します。遅延時間は s（秒）または ms（ミリ秒）で指定します。負の値を使うこともでき、これはアニメーションがすでに進んでいる状態からスタートすることを意味します。

使い方の基本

遅延を設定するには、要素のスタイルシートで以下のように書きます。animation-delay の値は、0s が開始時点、0.5s で半秒後、1s で1秒後などになります。

例: <span>.box { animation-name: fadeIn; animation-duration: 2s; animation-delay: 0.5s; }

ここでは animation-name に適用する @keyframes が必要です。例えば次のように定義します。

例: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

この設定を適用した要素は、ページが読み込まれた直後は見えず、0.5 秒待ってから 2 秒かけて表示されます。

負の遅延と複数要素の順次開始

負の遅延を使うと、アニメーションを始めるタイミングを「現状より前の段階」へずらすことができます。例えば -0.5s を指定すると、アニメーションは実質的に半秒進んだ状態から開始します。これを利用すると、複数の要素を同時に、または順番に開始させる演出を作りやすくなります。

複数の要素で順番に開始したい場合は、animation-delay を個別に設定するだけで実現できます。たとえば3つのアイテムに 0s、0.2s、0.4s の遅延を付けると、順番に現れます。

ブラウザの互換性と注意点

現代のブラウザは animation-delay を広くサポートしています。特に新しいブラウザでは特別な対応は不要ですが、古い Safari や Chrome のバージョンでは -webkit-animation-delay のプレフィックス付きのプロパティも併用することがあります。実装時は次のように書くと互換性が高まります。

例: -webkit-animation-delay: 0.5s; animation-delay: 0.5s;

また、アニメーションが終わった後も要素を表示したい場合は animation-fill-mode を forwards に設定します。これにより、最後のフレームが表示されたままになります。

実務での活用ポイント

実務では、ユーザーの目を引くエフェクトとして animation-delay を「徐々に現れる」演出に使うことが多いです。たとえば、ナビゲーションのアイコンを順番に表示したり、カードが画面に入るときにスムーズに現れるようにしたりします。遅延を使いすぎると逆に煩雑に見えるため、適度な長さとリズムを心がけましょう。

サンプル表

<th>値

説明
0s	即時開始
0.5s	半秒の遅延
1s	1 秒の遅延
-0.5s	進んだ状態から開始

よくある質問とポイント

Q: animation-delay と animation-duration の関係は？
A: delay は開始前の待ち時間、duration はアニメーション全体の継続時間です。これらを組み合わせて「何秒後に、何秒かけて」変化を作ります。

Q: 複数要素で同じアニメーションを使う場合は？
A: 同じ animation-name を設定し、別々に animation-delay を指定します。これにより同じ動きをずらして表示できます。

まとめとして、animation-delay はアニメーションの開始タイミングを操るとても強力な道具です。正しく使えば、ページのデザインを引き締め、読みやすさや使いやすさを高めることができます。初心者の方はまず小さなエフェクトから試し、他のアニメーションプロパティと組み合わせる練習をしてみましょう。

animation-delayの同意語

アニメーション遅延: アニメーションが開始されるまでの待機時間を指定する CSS のプロパティを指す、直訳的な表現です。
アニメーション開始遅延: アニメーションの開始を遅らせる時間のこと。delay の意味をそのまま表現しています。
アニメーションの遅延: アニメーションの開始を遅らせることを指す、説明的な表現です。
開始遅延: アニメーション開始の遅延を意味する短い表現。文脈で animation-delay を指します。
遅延時間: アニメーション開始待機時間のことを指す、一般的な言い方です。
遅延: 動作全般の遅れ・待機を意味しますが、文脈上 animation-delay の意味として用いられることがあります。
ディレイ: 英語の delay のカタカナ表記。技術文書や会話で略式に使われることがあります。
アニメーション開始前待機時間: アニメーションが始まる前の待機時間を端的に表す説明的な表現です。

animation-delayの対義語・反対語

即時開始: アニメーションを待機せず、すぐに開始させること。animation-delay がゼロ秒またはゼロ相当の遅延なしの状態を指すイメージです。
遅延なし: 開始前の待機時間が一切なく、すぐにアニメーションが動き出す状態のこと。
0秒遅延: アニメーションの開始待機が0秒で、実質的に待たない状態を表します。
前倒し開始: 予定より早く開始させること。負の遅延に近い意味で、タイムライン上で開始を早めるニュアンスです。
すぐ開始: すぐにアニメーションを開始することを示す表現。
直ちに開始: 遅延なしで直ちにアニメーションを開始する状態を指します。
即時発動: 待機を経ず、瞬時にアニメーションが発動・再生されることを示す表現。
開始即時: アニメーションの開始を遅延なしで即時に行う意味合いの表現。

animation-delayの共起語

animation: CSSアニメーションの総称。複数のプロパティを組み合わせて動かす仕組み。
animation-delay: アニメーション開始を遅らせる時間。正の値や負の値を指定でき、複数の遅延を設定する場合はリストで対応することがある。
animation-duration: 1回のアニメーションが完了するまでの時間。秒（s）やミリ秒（ms）で指定。
animation-name: アニメーションの名前。@keyframesで定義した名前と対応させる。
animation-timing-function: アニメーションの進行速度の変化を決める関数。例: ease、linear、ease-in-out など。
animation-iteration-count: アニメーションの再生回数。1、2、または infinite（無限）など。
animation-fill-mode: アニメーションが終了した後に要素をどの状態に保つか。none、forwards、backwards、both。
animation-direction: アニメーションの再生方向。normal、reverse、alternate、alternate-reverse。
animation-play-state: アニメーションの再生状態。running（再生中）または paused（停止中）。
keyframes: アニメーションの各段階のスタイルを定義するブロック。通常は from/to または百分割のパーセントで指定。
@keyframes: アニメーション名に対応する段階を定義する構文。@keyframes のブロックを作成する。
transition-delay: 別名の遅延プロパティ。主に遷移に対する遅延で、animation-delayとは別物。
-webkit-animation-delay: 古いブラウザ対応のベンダー_PREFIX。-webkit-接頭辞付きの同名プロパティ。
-webkit-animation-duration: 同上。ベンダープリフィックス付きの duration。
-webkit-keyframes: 古いWebKit向けのキー定義。
複数アニメーション: 1つの要素に対して複数のアニメーションを同時に適用する場合、各アニメーションの値をカンマで区切って指定する。
カンマ区切り: animation-name、animation-duration などを複数指定する書き方。複数アニメーションを同時に設定可能。
負の遅延: animation-delay に負の値を設定すると、開始時刻を過去にずらして早く開始させることができる。
s: 時間の単位。秒を表す記法。
ms: 時間の単位。ミリ秒を表す記法。
inherit: 親要素から値を継承して適用する。
initial: プロパティを初期値に戻す。
unset: プロパティを未設定の状態に戻す。

animation-delayの関連用語

animation-delay: アニメーションが実際に開始するまでの待機時間を設定します。値は秒（s）またはミリ秒（ms）で指定します。負の値を使うと、既に再生が始まっているかのように開始点をずらすことができます。
animation-duration: 1回のアニメーションの長さ（再生時間）を設定します。値は s または ms で指定します。
animation-iteration-count: アニメーションを何回再生するかを決めます。数値で回数、または infinite（無限）を指定します。
animation-timing-function: アニメーションの進行速度の変化の仕方を決める関数です。代表的な値は linear、ease、ease-in、ease-out、ease-in-out、そして cubic-bezier(...) です。
animation-name: 適用するキーフレームの名前を指定します。名前は @keyframes で定義します。
@keyframes: アニメーションの各時点のスタイルを定義するルール。0%〜100% または from〜to の段階でスタイルを設定します。
keyframes: アニメーションの各段階のスタイルを定義する枠組み。% あるいは from/to で段階を示し、@keyframes ルールとして実装します。
animation-fill-mode: アニメーションが終了した後に要素のスタイルをどう保持するかを決めます。forwards、backwards、both、none のいずれかを選びます。
animation-play-state: アニメーションの再生状態を指定します。running（再生中）または paused（一時停止）を使います。
animation-direction: アニメーションの再生方向を指定します。normal、reverse、alternate、alternate-reverse のいずれかです。
animation: 複数の animation-* プロパティを一度に設定するショートハンドです。時間・遅延・繰り返し回数などをカンマ区切りで並べて指定します。
-webkit-animation-delay: ブラウザの古い実装向けのベンダープリフィックス版。animation-delay と同じ意味です。
-webkit-animation: 古い WebKit ベンダー仕様のショートハンド。animation- の値をまとめて指定できます。
transition-delay: CSS のトランジションにも遅延を設定します。アニメーション遅延とは別の機能ですが、開始タイミングの概念として関連します。
negative animation-delay: 遅延値に負の値を指定すると、過去の再生点から開始したかのように再生が始まります。
prefers-reduced-motion: アクセシビリティの設定。ユーザーが動きを抑制したい場合にアニメーションを減らすよう、ブラウザが対応します。
comma-separated-lists: 複数のアニメーションを同時に適用する場合、animation-name/animation-duration などの値をカンマで区切り、同じ順序で対応させます。
cubic-bezier: timing-function の一種で、3次ベジェ曲線を自分で定義して速度変化を細かく制御できる関数です。