css3在动画完成后执行事件

时间：2024-09-14 09:07:14

第一种方法： 
用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。 
setTimeout(function(){ },time); 
第二种方法：

当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。

不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)

例子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>webkitAnimationEnd</title>

<style type="text/css">

#div1{

    margin: 200px auto 0;

    width: 200px;

    height: 200px;

    color: #fff;

    background-color: #000;

    -webkit-animation: transform 3s 2 ease;

}

@-webkit-keyframes transform {

    0%{

        -webkit-transform: scale(1) rotate(50deg);

    }

    30%{

        -webkit-transform: scale(2) rotate(100deg);

    }

    6%{

        -webkit-transform: scale(0.5) rotate(-100deg);

    }

    100%{

        -webkit-transform: scale(1) rotate(0);

    }

}

</style>

</head>

<body>

<div id="div1"></div>

<script type="text/javascript">

    var o = document.getElementById("div1");

    o.addEventListener("webkitAnimationEnd", function() {

       // this.className = "";

        alert("动画结束");

    })

</script>

</body>

</html>

相关文章