From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../document/animationiteration_event/index.html | 98 ++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/ja/web/api/document/animationiteration_event/index.html (limited to 'files/ja/web/api/document/animationiteration_event') diff --git a/files/ja/web/api/document/animationiteration_event/index.html b/files/ja/web/api/document/animationiteration_event/index.html new file mode 100644 index 0000000000..95addaa166 --- /dev/null +++ b/files/ja/web/api/document/animationiteration_event/index.html @@ -0,0 +1,98 @@ +--- +title: 'Document: animationiteration イベント' +slug: Web/API/Document/animationiteration_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - Event + - Reference + - animationiteration + - イベント +translation_of: Web/API/Document/animationiteration_event +--- +
{{APIRef}}
+ +

animationiteration イベントは、 CSS アニメーションの反復が1回分終了し、次の回が始まったときに発生します。このイベントは {{domxref("Document/animationend_event", "animationend")}} イベントと同時には発生せず、従って animation-iteration-count が1のアニメーションでは発生しません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}
+ +

このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationiteration イベントを参照してください。

+ +

例

+ +

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

+ +
let iterationCount = 0;
+
+document.addEventListener('animationiteration', () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+});
+ +

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

+ +
let iterationCount = 0;
+
+document.onanimationiteration = () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.animationiteration_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf