我們可以監聽 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）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
