Element: animationcancel イベント
=============================

**`animationcancel`** イベントは、 CSS アニメーションが予期せず中断されたときに発生します。言い換えれば、 `animationend` イベントを送出せずに実行が停止するときはいつでもです。これは `animation-name` が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。

このイベントのイベントハンドラーは `onanimationcancel` プロパティを設定するか、 `addEventListener()` を使用することにより追加することができます。

構文
--

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


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

onanimationcancel = (event) => {};
```

イベント型
-----

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

Event

AnimationEventイベントプロパティ
---------

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

`AnimationEvent.animationName` 読取専用 

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

`AnimationEvent.elapsedTime` 読取専用 

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

`AnimationEvent.pseudoElement` 読取専用 

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

例
-

このコードはリスナーに `animationcancel` イベントを追加します。


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

animated.addEventListener("animationcancel", () => {
  console.log("アニメーションが取り消されました");
});

animated.style.display = "none";
```


同様に、 `onanimationcancel` プロパティを `addEventListener()` の代わりに使用するとこうなります。


```js
const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
  console.log("アニメーションが取り消されました");
};

animated.style.display = "none";
```

### ライブ例

#### 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">アニメーションを有効化</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 {
    transform: translateX(100%) scaleX(3);
  }
  to {
    transform: translateX(0) scaleX(1);
  }
}
```


#### 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-animationcancel |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS アニメーション
* CSS アニメーションの使用
* `AnimationEvent`
* 関連イベント: `animationstart`, `animationend`, `animationiteration`
* `Document` を対象としたこのイベント: `animationcancel`
* `Window` を対象としたこのイベント: `animationcancel`