開發人員工具提示：如何檢查及修改 CSS 動畫

Sofia Emelianova

Chrome 開發人員工具的「Animations」分頁是一項功能強大的工具，可協助您放慢速度、重播、調整 CSS 動畫時間，以及立即查看結果。

在開啟狀態下，「Animations」分頁可自動錄製動畫，方便將動畫分組，且可讓您：

• 重播並放慢動畫，方便檢查動畫。
• 拖曳時間軸上的點，即可調整時間長度、時間和延遲時間，不必猜測及手動設定 CSS 值。

此外，您可以透過「Elements」(元素) >「Styles」(樣式) 窗格中的「Easing Editor」(加/減速編輯器) 編輯加/減速時間，並設定自訂 cubic-bezier 曲線值。詳情請參閱「使用「Easing Editor」編輯動畫和轉場時間一文。

如需更多實作學習體驗，請參閱「檢查及修改 CSS 動畫效果」指南的說明操作。