CSS3 的動畫效果強大,在移動端使用廣泛,動畫執行開始和結束都可以使用JS來監聽其事件。
以下是一個示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>CSS3 動畫事件</title> <style type="text/css"> h1 { animation-duration: 3s; animation-name: slidein; /* animation-iteration-count: infinite; animation-direction: alternate; */ } @keyframes slidein { from { margin-left: 100%; width: 100%; } to { margin-left: 0%; width: 100%; } } </style> </head> <body> <h1 id="ani">Test CSS3 SlideIn</h1> <script> ani.addEventListener('animationstart', function() { console.log('animate start') }, false); ani.addEventListener('animationend', function() { console.log('animate end') }, false); </script> </body> </html>
通過添加動畫事件,可以依次把一些圖片展示出來。
相關:
http://www.w3.org/TR/css3-animations/#animation-events
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations