animationiteration 事件
アニメーション反復 イベント
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">点我开始动画</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 开始动画
function myFunction() {
x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
x.style.animation = "mymove 4s 2";
}
// Chrome, Safari 和 Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart 事件触发 - 动画已经开始";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
定義と使用法
ani CSS 反復イベントの発生時期アニメーションが再生されます。
CSSのanimation-iteration-countプロパティがに設定されている場合 「1」の場合、アニメーションは 1 回だけ再生され、アニメーション反復イベントはトリガーされなくなります。
CSS アニメーションの詳細については、CSS3 アニメーションの章をご覧ください。
CSS アニメーションが再生されると、次の 3 つのイベントが発生します:
- animationstart - CSS アニメーションの開始後にトリガーされます
- animationiteration - CSS アニメーションが繰り返し再生されるときにトリガーされます
- animationend - CSS アニメーションの完了後にトリガーされます
ブラウザのサポート
表内の数字は、このイベントをサポートする最初のブラウザのバージョン番号を示します。
「webkit」または「moz」の後に指定された番号は、このイベントをサポートする最初のバージョン番号プレフィックスです。
| イベント | |||||
|---|---|---|---|---|---|
| アニメーション反復 | 4.0ウェブキット | 10.0 | 16.0 5.0モズ | 4.0ウェブキット | 15.0ウェブキット 12.1 |
注: Chrome、Safari、Opera ブラウザを使用してください webkitAnimationEnd プレフィックス。
文法
object.addEventListener("webkitAnimationIteration", myScript);
// Chrome、Safari、Opera コード
object.addEventListener("animationiteration", myScript); // 標準構文
object.addEventListener("animationiteration", myScript); // 標準構文
注: Internet Explorer 8 以前の IE バージョンは、addEventListener() メソッドをサポートしていません。
技術的な詳細
| バブリングがサポートされているかどうか: | はい |
|---|---|
| キャンセル可能: | いいえ |
| イベントタイプ: | AnimationEvent |
関連ページ
CSS チュートリアル: CSS3 アニメーション
CSS リファレンス マニュアル: CSS3 アニメーション プロパティ
CSS リファレンス マニュアル: CSS3 anime-iteration-count プロパティ
HTML DOM リファレンス マニュアル: スタイル アニメーション プロパティ
