css3在动画完成后执行事件

最新推荐文章于 2024-07-23 11:05:47 发布

weixin_30481087

最新推荐文章于 2024-07-23 11:05:47 发布

阅读量251

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/supe/p/7682122.html

版权

第一种方法：
用计时器，设定一个和动画时长一样的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>

转载于:https://www.cnblogs.com/supe/p/7682122.html

weixin_30481087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3在动画完成后执行事件

第一种方法：用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。setTimeout(function(){ },time);第二种方法：当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。不同浏览器的AnimationEnd写法(webkitAnimationEnd mozAnimati...
复制链接

扫一扫