We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

構文

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

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

<time>
アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (s) またはミリ秒 (ms) のどちらかで指定できます。単位は必須です。
正の数が指定された場合は、アニメーションが始まる経過時間を示します。 0s (既定値)の場合は、アニメーションは適用されたらすぐに始まります。

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

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 animation-name プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

形式文法

<time>#

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

仕様書

仕様書 状態 備考
CSS Animations
animation-delay の定義
草案 初回定義。

初期値0s
適用対象全要素、::before / ::after 疑似要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

43

あり -webkit-

12

161

49 -webkit-

44 -webkit- 2

5 -moz-

10

30

15 -webkit-

12.1 — 15

12 — 15 -o-

9

4 -webkit-

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

43

あり -webkit-

?

あり

あり -webkit-

16

49 -webkit-

44 -webkit- 2

5 -moz-

30

15 -webkit-

12.1 — 15

12 — 15 -o-

あり

あり -webkit-

?

1. Before Firefox 57, Firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. This bug affects only some platforms, such as Windows.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, teoli, Sebastianz, yyss, ethertank, Potappo, FredB
最終更新者: mfuji09,