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