Animation: finish イベント

Baseline Widely available

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

finishAnimation インターフェイスのイベントで、アニメーションの再生が完了したとき、または Animation.finish() メソッドが呼び出されてアニメーションが即座に終了させられたときに発生します。

メモ: "paused"の再生状態はfinished"の再生状態に優先します。 アニメーションが一時停止と完了の両方の状態の場合、 "paused" の状態が報告されます。 startTimedocument.timeline.currentTime - (Animation.currentTime * Animation.playbackRate) に設定するには、アニメーションを強制的に "finished" 状態にすることができます。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("finish", (event) => { })
onfinish = (event) => { }

イベント型

AnimationPlaybackEvent です。 Event から継承しています。

Event AnimationPlaybackEvent

イベントプロパティ

以下に挙げたプロパティに加え、親インターフェイスである Event から継承したプロパティが利用できます。

AnimationPlaybackEvent.currentTime 読取専用

イベントを生成したアニメーションの現在時刻。

AnimationPlaybackEvent.timelineTime 読取専用

イベントを生成したアニメーションのタイムラインの時刻値。

Animation.onfinish は、ウェブアニメーション API の国のアリスのアリスの成長/縮小ゲームで何度か使用しています。 ここでは、不透明アニメーションがフェードインした後、要素にポインターイベントを追加しています。

js
// ゲームのエンディングクレジットにアニメーションを追加
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);

// アニメーションクレジットの一時停止
bringUI.pause();

// この関数は、クレジットのポインターイベントを取り除く
hide(endingUI);

// 後でクレジットがフェードインされたときに、
// ポインターイベントを追加し直す
bringUI.onfinish = (event) => {
  endingUI.style.pointerEvents = "auto";
};

仕様書

Specification
Web Animations
# dom-animation-onfinish
Web Animations
# finish-event

ブラウザーの互換性

BCD tables only load in the browser

関連情報