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動畫的回調處理就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援topic.alibabacloud.com。
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
