動畫:檢查及修改 CSS 動畫效果

Sofia Emelianova
Sofia Emelianova

使用 Chrome 開發人員工具的「Animations」導覽匣分頁檢查及修改動畫。

總覽

如要擷取動畫,請開啟「Animations」分頁。自動偵測動畫,然後將這些動畫分組。

「Animations」分頁有兩個主要用途:

  • 檢查動畫。執行減速、重播或檢查動畫群組的原始碼。
  • 修改動畫。修改動畫群組的時間點、延遲、時間長度或主要畫面格位移。不支援主要畫面格和 Bezier 編輯功能。

「Animations」分頁支援 CSS 動畫、CSS 轉場效果、網頁動畫和 View Transitions API。目前尚不支援requestAnimationFrame動畫。

什麼是動畫群組?

動畫群組是一組看起來相關的動畫。

目前,網頁版沒有群組動畫的真正概念,因此動態設計人員和開發人員可以建構每個動畫,並安排時間,讓每個動畫呈現一個連貫的視覺效果。「動畫」分頁會根據開始時間 (不含延遲) 預測相關動畫,然後並排顯示。

換句話說,「Animations」分頁會將同一個指令碼區塊中觸發的動畫分為一組,但如果動畫為非同步性質,則會歸入不同群組。

開始使用

開啟「動畫」分頁的方法有兩種:

  • 依序選取 。「Customize and Control DevTools」 >「More tools」 >「Animations」選單中的動畫。
  • 按下下列其中一個選項,開啟「指令」選單:

    • macOS:Command + Shift + P
    • Windows、Linux 或 ChromeOS:Control + Shift + P

    接著開始輸入 Show Animations,並選取對應的「Drawer」面板。 顯示動畫。

根據預設,「Animations」分頁會在「Console」導覽匣旁開啟為分頁。導覽匣分頁可與任何面板搭配使用,也可以將其移至開發人員工具頂端

空白動畫分頁。

「Animations」分頁有四個主要部分:

動畫面板的各部分。

  1. 控管您可以在這裡封鎖「全部清除」擷取的動畫群組、暫停 暫停play_arrow 繼續動畫,或變更所選動畫群組的速度。
  2. 總覽:在這裡選取動畫群組,即可在「Details」窗格中檢查及修改。
  3. 時間軸重播 重播動畫、拖曳動畫或跳至特定時間點。
  4. 詳細資料。檢查及修改所選動畫群組。

如要擷取動畫,請在「Animations」分頁開啟時觸發動畫。如果載入網頁時觸發了動畫,請重新載入。

檢查動畫

擷取動畫後,您可以透過以下幾種方式重播動畫:

  • 將滑鼠遊標懸停在「Overview」窗格中的縮圖上,即可查看預覽畫面。
  • 拖曳播放頭 (紅色垂直長條) 即可拖曳可視區域動畫,或是按一下「時間軸」上的任一處將播放頭設為特定時間點。如果動畫已在播放中,就會繼續播放,反之則停止。
  • 從「Overview」窗格選取動畫群組 (它會顯示在「Details」窗格中),然後按下 重播按鈕。「Replay」按鈕。系統會在可視區域中重播動畫。

在「控制項」列中按一下 動畫速度按鈕。「動畫速度」按鈕,即可變更所選動畫群組的預覽速度。

查看動畫詳細資料

擷取動畫群組後,從「總覽」窗格中按一下該群組,即可查看相關詳細資料。

在「Details」窗格中,每個動畫都會自成一列。如要查看對應元素的完整名稱,請調整名稱欄的大小。

詳細資料窗格。

將滑鼠遊標懸停在動畫上,即可在可視區域中醒目顯示該動畫。按一下動畫,在「Elements」(元素) 面板中選取該動畫。

將滑鼠遊標懸停在動畫上,即可在可視區域中醒目顯示該動畫。

如果部分動畫的 animation-iteration-count 屬性設為 infinite,就會無限期重複播放。「Animations」分頁顯示其定義和疊代。

動畫疊代。

動畫最左邊、顏色較深的部分表示其定義。右側且淡出的區段代表疊代。

舉例來說,在下一個螢幕截圖中,第 2 和第 3 節代表區段一的疊代。

動畫疊代圖表。

如果兩個元素套用了相同動畫,「Animations」分頁會指派相同的顏色。顏色本身是隨機的,沒有重要性。例如,在下方的螢幕截圖中,div.eye.left::afterdiv.eye.right::after 對這兩個元素套用了相同的動畫 (eyes),就像對 div.feet::beforediv.feet::after 元素一樣。

不同顏色的動畫。

修改動畫

使用「Animations」分頁時,有三種方式可以修改動畫:

  • 動畫時間長度。
  • 主畫面時間點。
  • 開始時間延遲。

在這個部分中,假設下一張螢幕截圖代表原始動畫:

修改前的原始動畫。

如要變更動畫的時間長度,請拖曳第一個或最後一個圓圈。

修改時間長度。

如果動畫定義了任何主要畫面格規則,會以白色內圈表示。拖曳任一主要畫面格即可變更主要畫面格的時間。

已修改主要畫面格。

如要為動畫加上延遲,請按一下動畫 (而非圓形),然後拖曳到任何位置。

修改後的延遲時間。

在動畫期間編輯 ::view-transition 虛擬元素

有了 View Transitions API,只需要一個步驟就能變更 DOM,同時建立兩種狀態之間的動畫轉場。在動畫播放期間,API 會使用下列結構建構虛擬元素樹狀結構:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

如何在「元素」 >「樣式」中編輯這個結構:

  1. 開啟開發人員工具,檢查使用 View Transitions API 的頁面。例如這個示範頁面
  2. 在「動畫」中,按一下「暫停」
  3. 在網頁上觸發動畫。「Animations」面板隨即擷取動畫並立即暫停。您現在可以在 DOM 中找到 ::view-transition 結構,位於 <head> 元素上方。

    編輯 ::view-transition pseudo-element 的 CSS。

  4. 在「Elements」(元素) >「Styles」(樣式) 中,修改 ::view-transition 虛擬元素的 CSS。

  5. 繼續播放動畫並重播,以查看結果。

詳情請參閱「使用 View Transitions API 進行流暢和簡單的轉換」。