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 March 2020.

animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。

構文

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

js
addEventListener("animationend", (event) => {});

onanimationend = (event) => {};

イベント型

AnimationEvent です。 Event を継承しています。

Event AnimationEvent

イベントプロパティ

親である Event から継承したプロパティもあります。

AnimationEvent.animationName 読取専用

アニメーションを生成した animation-name の値を含む文字列です。

AnimationEvent.elapsedTime 読取専用

float で、このイベントが発行されたときにアニメーションが実行されていた時間（アニメーションが一時停止していた時間を除く）を秒単位で指定します。 animationstart イベントの場合、 elapsedTime は 0.0 です。ただし、animation-delay に負の値を指定した場合は、 (-1 * delay) を含む elapsedTime としてイベントが発行されます。

AnimationEvent.pseudoElement 読取専用

'::' で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列 '' となります。

例

この例は、アニメーションする要素を取得し、 animationend イベントを待ち受けます。

js
const animated = document.querySelector(".animated");

animated.addEventListener("animationend", () => {
  console.log("アニメーション終了");
});

同様に、 onanimationend イベントハンドラープロパティを使用するとこうなります。

js
const animated = document.querySelector(".animated");

animated.onanimationend = () => {
  console.log("アニメーション終了");
};

ライブ例

HTML

html
<div class="animation-example">
  <div class="container">
    <p class="animation">You chose a cold night to visit our planet.</p>
  </div>
  <button class="activate" type="button">Activate animation</button>
  <div class="event-log"></div>
</div>

CSS

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: slidein;
  animation-iteration-count: 2;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript

js
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 started' `;
});

animation.addEventListener("animationiteration", () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});

animation.addEventListener("animationend", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove("active");
  applyAnimation.textContent = "Activate animation";
});

animation.addEventListener("animationcancel", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});

applyAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
  animationEventLog.textContent = "";
  iterationCount = 0;
  const active = animation.classList.contains("active");
  applyAnimation.textContent = active
    ? "Cancel animation"
    : "Activate animation";
});

結果

仕様書

Specification
CSS Animations Level 1
# eventdef-globaleventhandlers-animationend

ブラウザーの互換性

BCD tables only load in the browser

関連情報