浅谈CSS3动画的回调处理

2020-04-30 15:19:40易采站长站整理

        }   
    </script>  
</head>  
<body>  
    <div class="rect"></div>  
</body>  
</html>  

2、animation

对于animation我们可以监听animationend事件,示例代码如下:

XML/HTML Code复制内容到剪贴板

<!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’;