CSS 判斷動畫開始

CSS 中有許多動畫效果，如何在某個動畫開始時觸發一些特定的事件呢？這里介紹兩種方法來判斷 CSS 動畫的開始時間。

方法一：使用 animationstart 事件

animationstart 事件在動畫開始時觸發，可以使用 JavaScript 綁定該事件來判斷動畫的開始時間。比如以下代碼：

const box = document.querySelector('.box');
box.addEventListener('animationstart', () =>{
console.log('Animation started');
});

這段代碼監聽了一個 class 為 box 的元素的 animationstart 事件，當動畫開始時，將會在控制臺輸出 'Animation started'。

方法二：使用 :animaton CSS 偽類

:animaton CSS 偽類會在動畫開始時為元素添加一個特定的樣式?？梢酝ㄟ^判斷元素是否擁有該樣式來判斷動畫開始時間。以下是一個例子：

.box {
animation: my-animation 1s;
}
.box.started {
color: red;
}
@keyframes my-animation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
const box = document.querySelector('.box');
box.addEventListener('animationstart', () =>{
box.classList.add('started');
});

在這個例子中，animation 屬性定義了一個名為 my-animation 的動畫效果，該動畫持續 1 秒鐘。當動畫開始時，元素會附帶一個名為 started 的 class，該 class 被定義為紅色的文本顏色。在 JavaScript 中，可以在 animationstart 事件中將該 class 添加到元素中，當動畫開始時，文本顏色就會變為紅色。

參考鏈接：

- MDN Web Docs: Using CSS animations
- MDN Web Docs: animationstart event
- MDN Web Docs: :animaton