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