关于animation事件的监听

css3 animation大家并不陌生，现在已经大面积使用了，在平常的开发中，有时候我们需要去监听下动画的执行情况，是否已经开始，或者结束来进行其它必要的操作。其实animation是可以被js监听到的，下面我们来看下代码吧。

定义和用法

CSS 动画播放时，会发生以下三个事件：
    animationstart - 动画开始后触发
    animationiteration - 动画重复播放时触发
    animationend - 动画完成后触发

案例Demo演示：

      demo演示：点击这里

<div class="anim_box">
    <div class="line"></div>
    <img src="images/xhr.png" class="xhr current" id="xhr">
  </div>
  <div class="anim_status" id="animStatus">

  </div>
  <div class="op">
      <button class="start" onclick="animPausedFn()">暂停</button>
      <button class="start" onclick="animRunningFn()">继续运动</button>
      <button class="start" onclick="animStartFn()">再次开始</button>
  </div>
  <script>
    window.running = false;
    var $xhr = document.getElementById("xhr");
    //添加
    function addTextFn(text){
      var $as = document.getElementById("animStatus");
      var node=document.createElement("div");
      var textnode=document.createTextNode(text);
      node.appendChild(textnode);
      $as.appendChild(node);
    }

    //开始
    function startFn(){
      addTextFn("开始啦...");
      window.running = true;
    }
    //结束
    function endFn(){
      addTextFn("表演结束");
      $xhr.className="xhr";
      window.running = false;
    }

    //动画开始
    $xhr.addEventListener("webkitAnnimationstart", startFn);
    $xhr.addEventListener("animationstart", startFn);

    //动画结束
    $xhr.addEventListener("webkitAnimationEnd", endFn);
    $xhr.addEventListener("animationend", endFn);


    //点击开始
    function animStartFn(){
      $xhr.className="xhr current";
    } 

    //点击暂停
    function animPausedFn(){
      if(window.running)
        $xhr.style.animationPlayState = "paused";
    } 
    //点击继续
    function animRunningFn(){
      $xhr.style.animationPlayState = "running";
    } 
  </script>