このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Element: animationstart イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2019年12月.
animationstart イベントは、CSS アニメーションが開始したときに発生します。animation-delay がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントはelapsedTime が待ち時間の絶対値と等しくなったときに発生します（および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります）。
構文
このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("animationstart", (event) => { })onanimationstart = (event) => { }イベント型
AnimationEvent です。Event を継承しています。
イベントプロパティ
親であるEvent から継承したプロパティもあります。
AnimationEvent.animationName読取専用アニメーションを生成した
animation-nameの値を含む文字列です。AnimationEvent.elapsedTime読取専用floatで、このイベントが発行されたときにアニメーションが実行されていた時間（アニメーションが一時停止していた時間を除く）を秒単位で指定します。animationstartイベントの場合、elapsedTimeは0.0です。ただし、animation-delayに負の値を指定した場合は、(-1 * delay)を含むelapsedTimeとしてイベントが発行されます。AnimationEvent.pseudoElement読取専用'::'で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列''となります。
例
このコードはanimationstart イベントを待ち受けし、イベント発生時にメッセージを記録します。
const animated = document.querySelector(".animated");animated.addEventListener("animationstart", () => { console.log("Animation started");});同様に、onanimationstart を使用するとこうなります。
const animated = document.querySelector(".animated");animated.onanimationstart = () => { console.log("Animation started");};ライブ例
HTML
<div> <div> <p>あなたは私たちの惑星を訪れるのに、寒い夜を選びました。</p> </div> <button type="button">アニメーションを有効化</button> <div></div></div>CSS
.container { height: 3rem;}.event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem;}.animation.active { animation-duration: 2s; animation-name: slide-in; animation-iteration-count: 2;}@keyframes slide-in { from { transform: translateX(100%) scaleX(3); } to { transform: translateX(0) scaleX(1); }}JavaScript
const animation = document.querySelector("p.animation");const animationEventLog = document.querySelector( ".animation-example>.event-log",);const applyAnimation = document.querySelector( ".animation-example>button.activate",);let iterationCount = 0;animation.addEventListener("animationstart", () => { animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;});animation.addEventListener("animationiteration", () => { iterationCount++; animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;});animation.addEventListener("animationend", () => { animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`; animation.classList.remove("active"); applyAnimation.textContent = "アニメーションを有効化";});animation.addEventListener("animationcancel", () => { animationEventLog.textContent = `${animationEventLog.textContent}'アニメーションキャンセル'`;});applyAnimation.addEventListener("click", () => { animation.classList.toggle("active"); animationEventLog.textContent = ""; iterationCount = 0; const active = animation.classList.contains("active"); applyAnimation.textContent = active ? "アニメーションをキャンセル" : "アニメーションを有効化";});結果
仕様書
| Specification |
|---|
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationstart |