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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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