善用CSS與JavaScript，打造動感十足的網頁體驗
在網頁動態設計中，開發者需精準評估動畫需求，選擇最適合的CSS或JavaScript技術。
許多網頁設計師認為CSS動畫比JavaScript動畫更難駕馭。儘管CSS動畫確實存在一些限制，但其功能遠超想像，且在效能上通常表現更佳！
即刻啟動！
結合JavaScript的靈活操作，CSS動畫與過渡能以比多數JavaScript函式庫更高效的方式實現硬體加速的動態效果與互動。讓我們一同探索！
精準掌控CSS過渡效果
在開發者社群中，關於如何觸發或暫停元素過渡效果的提問層出不窮。有了JavaScript，解決方案變得異常簡潔。
要觸發元素的過渡效果，只需透過JavaScript為該元素切換（toggle）一個特定的CSS類名即可。
若要暫停元素的過渡效果，可利用`getComputedStyle`和`getPropertyValue`取得欲暫停的過渡點數值。隨後，將該元素的CSS屬性設為此取得的數值。
JavaScript：CSS動畫的智慧助手
在精確控制CSS過渡與動畫時，一個鮮為人知的JavaScript技巧是利用其觸發的DOM事件。例如，動畫事件有`animationend`、`animationstart`、`animationiteration`，而過渡事件則有`transitionend`。這些事件分別在元素動畫結束、開始或完成一次迭代時觸發。
由於目前這些事件需要廠商前綴（vendor prefix），本範例將採用Craig Buckler開發的`PrefixedEvent`函式。此函式接收`element`、`type`和`callback`參數，確保這些事件能跨瀏覽器使用。關於如何透過JavaScript捕捉CSS動畫的詳細介紹，請參閱此處。同時，您也可參考此文，瞭解如何判斷是哪個動畫觸發了事件。
CSS過渡的進階調控
正如先前所學，我們可以監聽元素並回應`animationStart`、`animationIteration`、`animationEnd`等動畫相關事件。但若需要在動畫進行中修改CSS動畫，該如何處理？這需要一些精巧的操作！
animation-play-state 屬性解析
CSS的`animation-play-state`屬性在需要暫停動畫後再恢復時極為實用。您可透過JavaScript進行如下CSS修改（請注意廠商前綴）：
元素.風格.掌握最新時尚趨勢 = 「暫停」;
元素.風格.啟發您的個人風格 = 「進行中」;
即時獲取CSS動畫進度
Unfortunately, at this time, there is no way to get the exact current “percentage completed” of a CSS keyframe animation. 最佳方法是利用setInterval函式進行近似計算 that iterates 100 times during the animation, which is essentially: the animation duration in ms / 100. For example, if the animation is 4 seconds long, then the setInterval needs to run every 40 milliseconds (4000/100).
showPercent = window.setInterval(function() {
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40);
聰明應用，事半功倍
在開始編寫程式碼之前，仔細思考並規劃動畫的執行方式，是減少問題並達成預期效果的最佳策略，遠勝於事後搜尋解決方案！本文概述的技巧與方法，或許並非您專案動畫的最佳實現途徑。
在此，我們將展示一些巧妙的範例，它們僅需HTML和CSS即可解決您原本可能打算用JavaScript處理的問題。
總結與展望
- 開發者曾需要在CSS與JavaScript之間做出抉擇。
- 在JavaScript的輔助下，CSS過渡通常比CSS動畫更容易管理。
- CSS矩陣運算，對初學者而言，通常較為複雜難懂。
- 先思考要做什麼，再規劃如何執行。