アニメーションスタートイベント
例
CSSアニメーションが開始されたら、<div>要素を使用して何かを実行します。
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener("animationstart", myStartFunction);
定義と使用法
Animationstartイベントは、CSSアニメーションの再生が開始されたときに発生します。
CSSアニメーションの詳細については、 CSS3アニメーションに関するチュートリアルを参照してください。
CSSアニメーションが再生されると、発生する可能性のある3つのイベントがあります。
- Animationstart-CSSアニメーションが開始したときに発生します
- Animationiteration -CSSアニメーションが繰り返されるときに発生します
- Animationend -CSSアニメーションが完了したときに発生します
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
「webkit」または「moz」が後に続く数字は、プレフィックスで機能した最初のバージョンを指定します。
Event | |||||
---|---|---|---|---|---|
animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
注: Chrome、Safari、Operaの場合は、webkitAnimationStartプレフィックスを使用してください。
構文
object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript); // Standard syntax
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | はい |
---|---|
キャンセル可能: | 番号 |
イベントタイプ: | AnimationEvent |
DOMバージョン: | レベル3のイベント |
関連ページ
CSSチュートリアル:CSS3アニメーション
CSSリファレンス:CSS3アニメーションプロパティ
HTML DOMリファレンス:スタイルアニメーションプロパティ