CSS3 動畫觸發事件

  @keyframes mymove
        {
            0%   {top:0px; left:0px; background:red;}
            25%  {top:0px; left:100px; background:blue;}
            50%  {top:100px; left:100px; background:yellow;}
            75%  {top:100px; left:0px; background:green;}
            100% {top:0px; left:0px; background:red;}
        }

        @-moz-keyframes mymove /* Firefox */
        {
            0%   {top:0px; left:0px; background:red;}
            25%  {top:0px; left:100px; background:blue;}
            50%  {top:100px; left:100px; background:yellow;}
            75%  {top:100px; left:0px; background:green;}
            100% {top:0px; left:0px; background:red;}
        }

        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0%   {top:0px; left:0px; background:red;}
            25%  {top:0px; left:100px; background:blue;}
            50%  {top:100px; left:100px; background:yellow;}
            75%  {top:100px; left:0px; background:green;}
            100% {top:0px; left:0px; background:red;}
        }

        @-o-keyframes mymove /* Opera */
        {
            0%   {top:0px; left:0px; background:red;}
            25%  {top:0px; left:100px; background:blue;}
            50%  {top:100px; left:100px; background:yellow;}
            75%  {top:100px; left:0px; background:green;}
            100% {top:0px; left:0px; background:red;}
        }


        #animation {
            animation:mymove 5s 5;
            -webkit-animation:mymove 5s 5; /* Safari 和 Chrome */
        }

<div id="animation" style="width: 100px;height: 100px;background-color: #0baae4">Test content</div>

<ul id="output"></ul>

  var el = document.getElementById("animation");

    el.addEventListener("animationstart", listener, false);
    el.addEventListener("animationend", listener, false);
    el.addEventListener("animationiteration", listener, false);

    function listener(e) {
        var li = document.createElement("li");
        switch(e.type) {
            case "animationstart":
                li.innerHTML = "Started: elapsed time is " + e.elapsedTime;
                break;
            case "animationend":
                li.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
                break;
            case "animationiteration":
                li.innerHTML = "New loop started at time " + e.elapsedTime;
                break;
        }
        document.getElementById("output").appendChild(li);
    }

    el.addEventListener("click",he,false);
    function he() {
        if(el.style.webkitAnimationPlayState == "paused"){
            el.style.webkitAnimationPlayState = "running";
        }else{
            el.style.webkitAnimationPlayState = "paused";
        }

    }

CSS動畫有以下三個事件。

• animationstart事件：動畫開始時觸發。

• animationend事件：動畫結束時觸發。

• animationiteration事件：開始新一輪動畫循環時觸發。如果animation-iteration-count屬性等於1，該事件不觸發，即只播放一輪的CSS動畫，不會觸發animationiteration事件。

animation-play-state屬性可以控制動畫的狀態（暫停/播放），該屬性需求加上瀏覽器前綴。

 

原文鏈接：http://javascript.ruanyifeng.com/dom/css.html#toc15