animation-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

animation-delayCSS のプロパティで、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

試してみましょう

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利です。

構文

css
/* 単一のアニメーション */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* 複数のアニメーション */
animation-delay: 2.1s, 480ms;

/* グローバル値 */
animation-delay: inherit;
animation-delay: initial;
animation-delay: revert;
animation-delay: revert-layer;
animation-delay: unset;

<time>

アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (s) またはミリ秒 (ms) のどちらかで指定できます。単位は必須です。

正の値を指定すると、指定した時刻が経過した後にアニメーションを始めることを示します。既定値である 0s は、アニメーションが適用されるとすぐに始めることを示します。

負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 -1s を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 animation-name に現れる順にアニメーションに適用されます。アニメーションの数と animation-* プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。

メモ: animation-delayCSS スクロール駆動アニメーションでは効果がありません。

公式定義

初期値0s
適用対象すべての要素、::before / ::after 擬似要素
継承なし
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

animation-delay = 
<time>#

アニメーションの遅延を設定

このアニメーションは遅延がが 2 秒です。

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-delay: 2s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

結果

矩形の上にカーソルを当てるとアニメーションが始まります。

例については CSS アニメーションを参照してください。

仕様書

Specification
CSS Animations Level 1
# animation-delay

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-delay

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報