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

animationstart イベントは、 CSS アニメーションが開始したときに発生します。 {{cssxref("animation-delay")}} がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは {{domxref("AnimationEvent/elapsedTime", "elapsedTime")}} が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。

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

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

+ +

例

+ +

このコードは animationstart イベントを待ち受けし、イベント発生時にメッセージを記録します。

+ +
window.addEventListener('animationstart', () => {
+  console.log('Animation started');
+});
+
+ +

同様に、 onanimationstart を使用するとこうなります。

+ +
window.onanimationstart = () => {
+  console.log('Animation started');
+};
+
+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ + + +

{{Compat("api.Window.animationstart_event")}}

+ +

関連情報

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