index.md

title	short-title	slug	l10n
Element: animationend イベント	animationend	Web/API/Element/animationend_event	sourceCommit acfe8c9f1f4145f77653a2bc64a9744b001358dc

{{APIRef}}

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

構文

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

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

onanimationend = (event) => {};

イベント型

{{domxref("AnimationEvent")}} です。 {{domxref("Event")}} を継承しています。

{{InheritanceDiagram("AnimationEvent")}}

イベントプロパティ

親である {{domxref("Event")}} から継承したプロパティもあります。

• {{domxref("AnimationEvent.animationName")}} {{ReadOnlyInline}}
  • : アニメーションを生成した {{cssxref("animation-name")}} の値を含む文字列です。
• {{domxref("AnimationEvent.elapsedTime")}} {{ReadOnlyInline}}
  • : float で、このイベントが発行されたときにアニメーションが実行されていた時間（アニメーションが一時停止していた時間を除く）を秒単位で指定します。 animationstart イベントの場合、 elapsedTime は 0.0 です。ただし、{{cssxref("animation-delay")}} に負の値を指定した場合は、 (-1 * delay) を含む elapsedTime としてイベントが発行されます。
• {{domxref("AnimationEvent.pseudoElement")}} {{ReadOnlyInline}}
  • : '::' で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列 '' となります。

例

この例は、アニメーションする要素を取得し、 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">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

.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

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";
});

結果

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

• CSS アニメーション
• CSS アニメーションの使用
• {{domxref("AnimationEvent")}}
• 関連イベント: {{domxref("Element/animationstart_event", "animationstart")}}, {{domxref("Element/animationcancel_event", "animationcancel")}}, {{domxref("Element/animationiteration_event", "animationiteration")}}
• {{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/animationend_event", "animationend")}}
• {{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationend_event", "animationend")}}