JavaScript 掌控 CSS 動畫：進階技巧解析
談及網頁動畫，開發者需要運用合適的技術——CSS 或 JavaScript 來精確衡量動畫的需求。
網頁設計師有時認為 CSS 動畫比 JavaScript 動畫更難實現。儘管 CSS 動畫存在一些局限性，但大多數情況下，它的能力遠超我們想像，且通常效能更佳。
結合少量的 JavaScript，CSS 動畫與過渡效果能比大多數 JavaScript 函式庫更有效地實現硬體加速的動畫與互動。讓我們深入探討！
立即深入探討！
精準操控 CSS 過渡效果
程式開發論壇上有無數關於觸發與暫停元素過渡效果的問題。其實，透過 JavaScript 解決方案非常簡單。
要觸發元素的過渡效果，只需為該元素切換一個能觸發效果的類名。
要暫停元素的過渡效果，請在您希望暫停的過渡點使用 getComputedStyle 和 getPropertyValue。然後將該元素的 CSS 屬性值設為您剛才取得的值。
掌握核心要點
操作 CSS 過渡與動畫時，一些最有價值卻鮮為人知的 JavaScript 技巧是它們觸發的 DOM 事件。例如：animations 的 animationend、animationstart、animationiteration，以及 transitions 的 transitionend。您或許能猜到它們的作用。這些動畫事件分別在元素上的動畫結束、開始或完成一次迭代時觸發。
目前這些事件需要廠商前綴，因此在此範例中，我們使用了 Craig Buckler 開發的 PrefixedEvent 函式，它包含 element、type 和 callback 參數，有助於實現跨瀏覽器的事件支援。這是他關於使用 JavaScript 捕捉 CSS 動畫的實用文章。另一篇則探討如何判斷事件是為哪個動畫（名稱）觸發的。
運用 CSS 的「回呼函數」
正如我們剛才學到的，我們可以監控元素並對動畫相關事件作出反應：animationStart、animationIteration 和 animationEnd。但如果您想在動畫進行中更改 CSS 動畫呢？這需要一些技巧！
animation-play-state 屬性詳解
CSS 的 animation-play-state 屬性在您僅需暫停動畫並可能稍後繼續時非常有用。您可以透過 JavaScript 像這樣更改 CSS（請注意廠商前綴）：
元素.樣式.流暢的動畫效果 = "已暂停";
元素.樣式.無縫的用戶界面過渡 = "运行中";
獲取當前關鍵幀百分比
很抱歉，目前无法精确获取 CSS 关键帧动画的当前“完成百分比”。 最適合近似值的方法是使用 setInterval 函式 该动画会迭代 100 次，本质上是：动画时长（毫秒）/ 100。例如，如果动画时长为 4 秒，则 setInterval 需要每 40 毫秒运行一次（4000/100）。
显示百分比 = 窗口.setInterval(函数() {
如果 (当前百分比 < 100) {
当前百分比 += 1;
} 否则 {
当前百分比 = 0;
}
// Updates a div that displays the current percent
结果.innerHTML = 当前百分比;
}, 40);
總結與展望
在開始編寫程式碼之前，仔細思考並規劃過渡或動畫的運行方式，是減少問題並獲得所需效果的最佳途徑。這比事後搜尋解決方案要好得多！本文概述的技術和技巧不一定總是創建專案所需動畫的最佳方法。
這裡有一個小範例，展示了僅使用 HTML 和 CSS 如何巧妙地解決一個您可能認為需要 JavaScript 的問題。
深入解析：JavaScript 與 CSS 動畫的完美融合
- 開發者曾需要在 CSS 和 JavaScript 之間做選擇。
- 在 JavaScript 中，CSS 過渡通常比 CSS 動畫更容易操作。
- CSS 矩陣（Matrices）通常很難處理，尤其是對初學者而言。
- 思考應做之事並規劃如何執行。