Animation Events

Animation Events 有以下四種：
  1. animationstart：當動畫開始。
  2. animationend：當動畫結束。
  3. animationiteration：當動畫重複。
  4. animationcancel：當動畫中止 ( 目前還不支援 )。
下面的例子會讓動畫播放兩次後停止，並會在動畫下面放上一個字串，用 JavaScript 偵測並顯示現在動畫的狀態。 
  <script>
    var horse = document.getElementById('horse');
    var text = document.getElementById('text');
    hourse.addEventListener('animationstart',function(){
      text.innerHTML = '動畫開始';
    });
    hourse.addEventListener('animationend',function(){
      text.innerHTML = '動畫結束';
    });
    hourse.addEventListener('animationiteration',function(){
      text.innerHTML = '動畫重複';
    });
    hourse.addEventListener('animationcancel',function(){
      text.innerHTML = '動畫暫停';
    });
  </script>