animationend 事件

时间 2021-02-14

标签 javascript html java web 动画 code htm 事件 utf-8 栏目 JavaScript 繁體版

原文原文链接

CSS动画事件

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

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

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

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 事件java