JavaScript 與 CSS 動畫的完美結合：打造互動新體驗
在網頁動畫的世界中，開發者需要衡量需求，選擇 CSS 或 JavaScript 來實現最佳效果。
許多設計師認為 CSS 動畫比 JavaScript 更難掌握，但其實 CSS 動畫的潛力遠超想像，而且效能通常更優異。
加入 JavaScript 的輔助後，CSS 動畫與過渡能比多數 JS 函式庫更高效地實現硬體加速的互動效果。讓我們立刻開始吧！
立即開始探索！
掌控 CSS 過渡效果
在程式開發社群中，經常有人詢問如何觸發或暫停元素的過渡效果。使用 JavaScript，解決方案出乎意料地簡單。
要觸發元素的過渡，只需為該元素切換一個觸發用的 class 名稱。
若要暫停元素的過渡，可在欲暫停的時間點使用 getComputedStyle 與 getPropertyValue，然後將元素的 CSS 屬性設為取得的數值。
活用 JavaScript 回呼函數
CSS 過渡與動畫中最實用但鮮為人知的 JavaScript 技巧之一，是它們觸發的 DOM 事件，例如 animationend、animationstart、animationiteration 以及 transitionend。這些事件分別在動畫結束、開始或重複時觸發。
由於這些事件目前需要瀏覽器前綴，本示範採用 Craig Buckler 開發的 PrefixedEvent 函數，接受 element、type、callback 參數，協助跨瀏覽器運作。
解鎖 CSS 動畫潛能
如所學，我們可以監聽元素並回應 animationStart、animationIteration、animationEnd 等事件。但若想在動畫進行中修改 CSS 動畫，就需要更巧妙的操作！
animation-play-state 屬性應用
CSS 的 animation-play-state 屬性非常適合暫停動畫後再恢復。透過 JavaScript 修改 CSS 如下（請注意前綴）。
元素.樣式.最新時尚趨勢即時傳遞。 = 「暫停」;
元素.樣式.讓個人風格閃耀的平台。 = 「運行中」;
取得當前關鍵幀進度
很遺憾，目前無法取得 CSS 關鍵影格動畫的「完成百分比」精確數值。 最精確的近似方法是使用 setInterval 函數。 在動畫期間迭代 100 次，基本上就是：動畫持續時間（毫秒）除以 100。例如，若動畫長度為 4 秒，則 setInterval 需每 40 毫秒（4000/100）執行一次。
var 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 矩陣變換對初學者來說往往較難掌握。
- 先思考目標，再規劃執行方式。