Element: animationend イベント
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月.
animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("animationend", (event) => { })
onanimationend = (event) => { }
イベント型
AnimationEvent です。 Event を継承しています。
イベントプロパティ
親である Event から継承したプロパティもあります。
AnimationEvent.animationName読取専用-
アニメーションを生成した
animation-nameの値を含む文字列です。 AnimationEvent.elapsedTime読取専用-
floatで、このイベントが発行されたときにアニメーションが実行されていた時間（アニメーションが一時停止していた時間を除く）を秒単位で指定します。animationstartイベントの場合、elapsedTimeは0.0です。ただし、animation-delayに負の値を指定した場合は、(-1 * delay)を含むelapsedTimeとしてイベントが発行されます。 AnimationEvent.pseudoElement読取専用-
'::'で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列''となります。
例
この例は、アニメーションする要素を取得し、 animationend イベントを待ち受けます。
const animated = document.querySelector(".animated");
animated.addEventListener("animationend", () => {
console.log("アニメーション終了");
});
同様に、 onanimationend イベントハンドラープロパティを使用するとこうなります。
const animated = document.querySelector(".animated");
animated.onanimationend = () => {
console.log("アニメーション終了");
};
ライブ例
HTML
<div class="animation-example">
<div class="container">
<p class="animation">あなたは私たちの惑星を訪れるのに、寒い夜を選びました。</p>
</div>
<button class="activate" type="button">アニメーションを有効化</button>
<div class="event-log"></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-animationend |