Element: animationiteration イベント
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.
animationiteration
イベントは、 CSS アニメーションの反復が 1 回分終了し、次の回が始まったときに発生します。このイベントは animationend
イベントと同時には発生せず、従って animation-iteration-count
が 1 のアニメーションでは発生しません。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("animationiteration", (event) => {});
onanimationiteration = (event) => {};
イベント型
AnimationEvent
です。 Event
を継承しています。
イベントプロパティ
親である Event
から継承したプロパティもあります。
AnimationEvent.animationName
読取専用-
アニメーションを生成した
animation-name
の値を含む文字列です。 AnimationEvent.elapsedTime
読取専用-
float
で、このイベントが発行されたときにアニメーションが実行されていた時間(アニメーションが一時停止していた時間を除く)を秒単位で指定します。animationstart
イベントの場合、elapsedTime
は0.0
です。ただし、animation-delay
に負の値を指定した場合は、(-1 * delay)
を含むelapsedTime
としてイベントが発行されます。 AnimationEvent.pseudoElement
読取専用-
'::'
で始まる文字列で、アニメーションを実行する擬似要素の名前を指定します。です。アニメーションが擬似要素上で動作しておらず、要素上で動作している場合は、空文字列''
となります。
例
このコードは animationiteration
を使用して、アニメーションの反復が終了した回数を追跡します。
const animated = document.querySelector(".animated");
let iterationCount = 0;
animated.addEventListener("animationiteration", () => {
iterationCount++;
console.log(`アニメーション反復回数: ${iterationCount}`);
});
同様に、 onanimationiteration
イベントハンドラープロパティを使用するとこうなります。
const animated = document.querySelector(".animated");
let iterationCount = 0;
animated.onanimationiteration = () => {
iterationCount++;
console.log(`アニメーション反復回数: ${iterationCount}`);
};
ライブ例
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
.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
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-animationiteration |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS アニメーション
- CSS アニメーションの使用
AnimationEvent
- 関連イベント:
animationstart
,animationend
,animationcancel
Document
を対象としたこのイベント:animationiteration
Window
を対象としたこのイベント:animationiteration