CSS3-动画监听

动画事件监听

<!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>
posted @ 2023-02-02 10:53  过好每一天2022  阅读(15)  评论(0)    收藏  举报