Document: animationiteration event

animationiteration イベントは、 CSS アニメーションの反復が終了したときに発生します。このイベントは animation-iteration-count が1のアニメーションでは発生しません。

バブリング はい
キャンセル可能 いいえ
インターフェイス AnimationEvent
イベントハンドラー onanimationiteration

このコードは animationiteration を使用して、、アニメーションの反復が終了した回数を追跡しています。

let iterationCount = 0;

document.addEventListener('animationiteration', () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
});

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

let iterationCount = 0;

document.onanimationiteration = () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
};

仕様書

仕様書 状態 備考
CSS Animations 草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
animationiteration eventChrome 完全対応 43Edge ? Firefox 完全対応 51IE ? Opera 完全対応 30Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Edge Mobile ? Firefox Android 完全対応 51Opera Android 完全対応 30Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,