CSS3动画事件

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>