我們在做js動畫的時候，很多時候都需要做回調處理，如在一個動畫完成後觸發一個事件、一個動畫完成後執行另外一個動畫等等，但在使用CSS3動畫時能不能捕獲到運動的狀態做回調處理呢？
CSS3動畫也是可以做回呼處理的，這裡分成兩個屬性，一個是transition[w3c文件]，另外一個是animation[w3c文件]。
1、transition
對於transition，可以監聽transitionend事件，當動畫完成時觸發，可以這樣使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-transitionend - BeyondWeb</title>
<style>
* {margin: 0; padding: 0;}
.rect {
width: 100px;
height: 100px;
background-color: #f80;
-webkit-transition: all .5s;
}
</style>
<script>
window.onload = function () {
var _rect = document.querySelector('.rect');
_rect.onclick = function () {
_rect.style.webkitTransform = 'translateX(300px)';
}
_rect.addEventListener('webkitTransitionEnd', function () {
alert('动画执行完毕！');
// callback here
}, false);
}
</script>
</head>
<body>
<p class="rect"></p>
</body>
</html>
2、animation
#對於animation我們可以監聽animationend事件，範例程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-animationend - BeyondWeb</title>
<style>
* {margin: 0; padding: 0;}
.rect {
position: relative;
width: 100px;
height: 100px;
background-color: #f80;
}
@-webkit-keyframes move {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
</style>
<script>
window.onload = function () {
var _rect = document.querySelector('.rect');
_rect.onclick = function () {
_rect.style.webkitAnimation = 'move 3s';
}
_rect.addEventListener('webkitAnimationEnd', function () {
alert('动画执行完毕！');
// callback here
}, false);
}
</script>
</head>
<body>
<p class="rect"></p>
</body>
</html> #就是關於CSS3動畫回呼處理的一些內容，最近在做H5頁面時用到了，總結一下。
以上這篇淺談CSS3動畫的回呼處理就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。
更多淺談CSS3動畫的回呼處理方法相關文章請關注PHP中文網！
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
WebStorm Mac版
好用的JavaScript開發工具
