ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーション終了イベントを監視する例を共有する
CSS3アニメーション終了イベントを監視する例を共有する
- 零下一度オリジナル
- 2017-05-18 14:29:275200ブラウズ
CSS3 アニメーションがアニメーションを完了したとき、アニメーションを終了状態またはその他のイベントに維持したい場合はどうすればよいでしょうか?
webkitAnimationEnd イベントを聞くことができます
// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})-webkit-animation アニメーションには 3 つのイベントがあります:
開始イベント: webkitAnimationStart
終了イベント: webkitAnimationEnd
リピート モーション イベント: webkitAnimationIteration
// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
}) 例:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>webkitAnimationEnd</title><style type="text/css">#p1{
margin: 200px auto 0;
width: 200px;
height: 200px;
color: #fff;
background-color: #000;
-webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform {
0%{
-webkit-transform: scale(1) rotate(50deg);
}
30%{
-webkit-transform: scale(2) rotate(100deg);
}
6%{
-webkit-transform: scale(0.5) rotate(-100deg);
}
100%{
-webkit-transform: scale(1) rotate(0);
}}</style></head><body><p id="p1"></p><script type="text/javascript">var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
alert("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
alert("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { this.className = "";
alert("动画结束");
})</script></body></html> css3のtransition属性には、アニメーションが終了するときに終了イベントもあります: webkitTransitionEnd
注: トランジション用のイベントは1つだけです
[関連おすすめ]
1.アニメーションの詳細な紹介- CSS3のdirection属性
2.マスターしなければならないCSS3アニメーション（アニメーション）の8つのプロパティ
3.アニメーションプロパティを使用してループ間の遅延実行を実装するチュートリアル
4. CSS3 の 2 つの一時停止メソッド (トランジション、アニメーション)以上がCSS3アニメーション終了イベントを監視する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。