animationend 事件

最新推荐文章于 2021-12-30 18:02:33 发布

weixin_33845477

最新推荐文章于 2021-12-30 18:02:33 发布

阅读量289

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011081832

版权

CSS动画事件

CSS 动画播放时，会发生以下三个事件：

animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发

注意标准语法都是小写，兼容大小写驼峰写法

webkitAnimationStart
webkitAnimationIteration
webkitAnimationEnd

语法

object.addEventListener("webkitAnimationEnd", myScript);  // Chrome, Safari 和 Opera 
object.addEventListener("animationend", myScript);        // 标准语法

举例

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
    <style>
        *{margin: 0;padding: 0;}
        #box{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-animation: move 2s 2 ease;
        }
        @-webkit-keyframes move {
            0%{left: 0;}
            50%{left: 200px;}
            100%{left: 0;}
        }
    </style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    oBox.addEventListener("animationstart", start); // 动画开始时事件
    oBox.addEventListener("animationiteration", run);  // 动画重复运动时事件
    oBox.addEventListener("animationend", end); // 动画结束时事件
    function start() { console.log("动画开始"); }
    function run() { console.log("动画重复运动"); }
    function end() {  console.log("动画结束"); }
</script>
</body>
</html>

animationend 事件

weixin_33845477

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animationend 事件

CSS动画事件CSS 动画播放时，会发生以下三个事件：animationstart - CSS 动画开始后触发animationiteration - CSS 动画重复播放时触发animationend - CSS 动画完成后触发注意标准语法都是小写，兼容大小写驼峰写法webkitAnimationStartwebkitAn...
复制链接

扫一扫