CSS animation 觸發事件

當元素使用 animation 樣式產生動畫效果時，會觸發 animationstart、animationend、animationiteration 和 animationcancel 等相關事件 ( event )，這些事件可以透過 JavaScript 接收並進行對應的動作，這篇教學會介紹這些 animation 的觸發事件，以及使用 CSSKeyframesRule 修改進行中的動畫樣式。

閱讀更多：CSS 動畫 animation、自訂 CSS 動畫路徑 offset、CSS 多重動畫的權重與順序

快速導覽：

• animation 觸發的事件
• 使用 JavaScript 讀取 animation 觸發事件
• CSSKeyframesRule

animation 觸發的事件

元素使用 animation 樣式產生動畫效果時，在動畫進行過程中會觸發下列四種事件：

使用 JavaScript 讀取 animation 觸發事件

元素 animation 觸發的事件無法在 CSS 裡操作，必須透過 JavaScript 才能讀取，下方範例會使用 JavaScript 讀取四種觸發事件，當動畫開始時會出現「start」，每當動畫重複一次就會出現「重複次數」，動畫結束後會出現「end」，若動畫進行到一半終止 ( 滑鼠移開造成中止 )，就會出現「cancel」。

線上展示：https://codepen.io/oxxo/pen/GRVeXNq

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方</h2>
<h3>動畫狀態：<span></span></h3>
<div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    width: 300px;
    border: 2px solid #000;
  }
  h2:hover~div {
    animation-name: oxxo;
    animation-duration: 2s;
    animation-iteration-count: 3;
  }
  div {
    width: 50px;
    height: 50px;
    margin:5px;
    background: red;
  }
  @keyframes oxxo{
    50% {margin-left: 200px;}
  }
</style>

<!-- JS 程式碼 -->
<script>
  const msg = document.querySelector('span');
  const d = document.querySelector('div');
  let num = 0;

  d.addEventListener("animationstart", () => {
    msg.innerHTML = "start";
  });
  d.addEventListener("animationend", () => {
    msg.innerHTML = "end";
  });
  d.addEventListener("animationiteration", () => {
    num = num + 1;
    msg.innerHTML = `重複 ${num} 次`;
  });
  d.addEventListener("animationcancel", () => {
    msg.innerHTML = "cancel";
  });
</script>

CSSKeyframesRule

瀏覽器有一個很好用的功能：「網頁開發者工具」，可以透過這個功能查看 document 的 styleSheets 屬性，這個屬性會將網頁裡所有用到的樣式列出，舉例來說，打開任何一網頁後開啟網頁開發者工具，在 console 輸入 document.styleSheets，就會看到網站使用的所有 CSS。

如果網頁中使用下方範例製作簡單動畫，開啟網頁後開啟網頁開發者工具，在 console 輸入 document.styleSheets，就能看到 CSSKeyframesRules 動畫規則，以及 CSS 中對於這個動畫的所有設定。

線上展示：https://codepen.io/oxxo/pen/wvVOEod

<!-- HTML 程式碼-->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 50px;
    height: 50px;
    margin:5px;
    animation-name: oxxo;
    animation-duration: 2s;
    animation-iteration-count: infinite; /* 動畫無限播放 */
    background: red;
  }

  @keyframes oxxo{
    33% {background: #0a0;}
    50% {margin-left: 200px;}
    66% {background: #06f;}
  }
</style>

透過下列三種 JavaScript 的方法就可以修改動畫內容，下方的範例會在網頁打開的時候，點擊按鈕後會移除原本 50% 的 keyframe 並添加新的 50% keyframe，在「動畫不中斷」的情況下，修改動畫樣式。

線上展示：https://codepen.io/oxxo/pen/jOgJvVY

<!-- HTML 程式碼-->
<button>更換動畫內容</button>
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 50px;
    height: 50px;
    margin:5px;
    animation-name: oxxo;
    animation-duration: 2s;
    animation-iteration-count: infinite; /* 動畫無限播放 */
    background: red;
  }

  @keyframes oxxo{
    33% {background: #0a0;}
    50% {margin-left: 200px;}
    66% {background: #06f;}
  }
</style>

<!-- JS 程式碼 -->
<script>
  const btn = document.querySelector('button');
  const keyframes = document.styleSheets[0].cssRules[1];
  btn.addEventListener('click',function(){
    keyframes.deleteRule('50%');
    keyframes.appendRule('50% {margin-top: 100px;}');
  });
</script>

小結

由於操控事件需要具有一些 JavaScript 的基礎，沒有辦法單純依靠 CSS 就實現，不過 animation 事件是輔助動畫相當實用的技巧，如果有機會，不妨替網頁動畫增加一些事件機制，做出更有意思的效果。

閱讀更多：CSS 動畫 animation、自訂 CSS 動畫路徑 offset、CSS 多重動畫的權重與順序

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～