このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2015年9月.
animation-delay はCSS のプロパティで、要素にアニメーションを適用してからアニメーションが実行されるまでの待ち時間を指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティであるanimation プロパティを使用すると便利です。
試してみましょう
animation-delay: 250ms;animation-delay: 2s;animation-delay: -2s;<section> <div>アニメーション<span></span></div> <div>delay を選択すると始まります！</div></section>#example-element { background-color: #1766aa; color: white; margin: auto; margin-left: 0; border: 5px solid #333333; width: 150px; height: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column;}#play-status { font-weight: bold;}.animating { animation-name: slide; animation-duration: 3s; animation-timing-function: ease-in; animation-iteration-count: 2; animation-direction: alternate;}@keyframes slide { from { background-color: orange; color: black; margin-left: 0; } to { background-color: orange; color: black; margin-left: 80%; }}const el = document.getElementById("example-element");const status = document.getElementById("play-status");function update() { status.textContent = "待機中"; el.className = ""; window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { el.className = "animating"; }); });}el.addEventListener("animationstart", () => { status.textContent = "動作中";});el.addEventListener("animationend", () => { status.textContent = "完了";});const observer = new MutationObserver(() => { update();});observer.observe(el, { attributes: true, attributeFilter: ["style"],});update();構文
/* 単一のアニメーション */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-delay はCSS スクロール駆動アニメーションでは効果がありません。
公式定義
形式文法
animation-delay =
<time>#
例
アニメーションの待機時間を設定
このアニメーションの待機時間は 2 秒です。
HTML
<div></div>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 |