animationstart イベント
定義と使用法
CSSアニメーションが再生を開始するとき、animationstartイベントが発生します。
CSSアニメーションの詳細についての知識を得るには、私たちの CSS3アニメーションチュートリアル。
CSSアニメーションが再生中に、3つのイベントが発生する可能性があります：
- animationstart - CSSアニメーションが開始すると発生します
- animationiteration - CSSアニメーションが繰り返されると発生します
- animationend - CSSアニメーションが完了すると発生します
例
CSSアニメーションが開始されたとき、<div>要素に対して何かを行います：
var x = document.getElementById("myDIV");
// Chrome、SafariおよびOpera用のコード
x.addEventListener("webkitAnimationStart", myStartFunction);
// 標準文法
x.addEventListener("animationstart", myStartFunction);
文法
object.addEventListener("webkitAnimationStart", myScript); // Chrome、SafariおよびOpera用のコード
object.addEventListener("animationstart", myScript); // 標準文法
注釈：Internet Explorer 8またはそれ以前のバージョンはサポートしていません addEventListener()メソッド。
技術的詳細
| バブル： | サポート |
|---|---|
| キャンセル可能： | サポート外 |
| イベントタイプ： | AnimationEvent |
| DOMバージョン： | レベル3イベント |
ブラウザのサポート
表の数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。
数字の後ろの "webkit" または "moz" は、プレフィックスを使用する最初のバージョンを示しています。
| イベント | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
注釈：Chrome、Safari、およびOperaの場合はwebkitAnimationEndを使用してください。
関連ページ
CSS チュートリアル：CSS3 アニメーション
CSS リファレンスマニュアル：CSS3 animation 属性
HTML DOM リファレンスマニュアル：Style animation 属性
