分享一個監聽css3動畫（animation）結束事件實例
- 零下一度原創
- 2017-05-18 14:29:275245瀏覽
當css3的animation完成一個動畫，我們想讓動畫保持在終止的狀態或其他一些事件，要怎麼做呢？
我們可以監聽webkitAnimationEnd 事件就可以
// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})-webkit-animation動畫有三個事件：
開始事件: 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
注意：transition 僅有此事件
【相關推薦】
1. 詳細介紹CSS3中animation- direction屬性
2. 必須掌握的CSS3動畫（Animation）的8大屬性
3. 利用animation屬性實現循環間的延時執行實例教學
4. 詳解css3中兩種暫停方式（transition、animation）
以上是分享一個監聽css3動畫（animation）結束事件實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn