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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

總覽

如要擷取動畫，請開啟「Animations」面板。它會自動偵測動畫並排序成群組。

「Animations」面板有兩個主要用途：

  • 檢查動畫。放慢、重播或檢查動畫的原始碼 群組。
  • 修改動畫。修改時間、延遲、時間長度或主要畫面格偏移。 動畫組。不支援編輯主要畫面格和貝茲。
，瞭解如何調查及移除這項存取權。

「動畫」面板支援 CSS 動畫、CSS 轉場效果、網路動畫和 View Transitions API。 目前不支援requestAnimationFrame動畫。

什麼是動畫群組？

動畫群組是一組外觀彼此相關的動畫。

目前，網路上沒有群組動畫的實際概念，因此動態設計人員和開發人員會動手製作個別動畫，讓動畫呈現連貫一致的視覺效果。「動畫」面板會根據開始時間預測相關動畫 (不含延遲)，並並排分組。

換句話說，「Animations」面板會將同一個指令碼區塊中觸發的動畫歸為一組，但在非同步的情況下，動畫會歸入不同的群組。

開啟「動畫」面板

開啟「Animations」面板的方式有兩種：

  • 依序選取「自訂及控制開發人員工具」圖示 。 >更多工具 >動畫。 選單中的動畫。

  • 按下列任一選項開啟「Command」選單：

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

    然後開始輸入 Show Animations，並選取對應的「導覽匣」面板。 顯示動畫。

根據預設，「動畫」面板會以分頁形式顯示在「主控台」導覽匣旁邊。導覽匣分頁可以與任何面板搭配使用，也可以將分頁移至開發人員工具頂端。

空白動畫面板。

「Animations」面板會在您開啟播放中的動畫時自動擷取。如果載入網頁時觸發動畫或已停止播放，請重新載入面板開啟的頁面。

熟悉「動畫」面板 UI

「Animations」面板有四個主要部分：

「動畫」面板的版面。

  1. 控管您可以在此封鎖 全部已擷取的動畫群組、暫停 暫停 或 play_arrow 繼續 動畫，或變更所選動畫群組的速度。

  2. 總覽：顯示兩種以圖示標示的動畫群組：滑鼠捲動式及排程一般 (以時間為準)。

    在「Details」窗格中檢查及修改動畫群組。

  3. 時間軸。視動畫群組的類型而定，時間軸可能如下：

    • 以像素為單位，顯示滑鼠捲動導向的動畫。
    • schedule 時間式動畫 (以毫秒為單位)。

    你可以在時間軸中重播、重播動畫、拖曳動畫，或跳至特定時間點。

  4. 詳情。檢查及修改所選動畫群組。

如要擷取動畫，請在「Animations」面板開啟時觸發動畫。

檢查動畫

擷取動畫後，您可以透過下列幾種方式重播動畫：

  • 在「總覽」窗格中，將滑鼠遊標懸停在縮圖上，即可查看預覽畫面。
  • 拖曳播放頭 (紅色垂直線) 來拖曳可視區域動畫，或點選時間軸上的任一處，將播放頭設為特定時間點。動畫會繼續播放，若已播放，則會停止。
  • 從「Overview」(總覽) 窗格中選取動畫群組，使其顯示在「Details」(詳細資料) 欄中 窗格)，然後按下 重播按鈕。 「Replay」按鈕。 系統就會在可視區域中重播動畫。

按一下「Controls」列中的「動畫速度」動畫速度按鈕。按鈕，變更所選動畫群組的預覽速度。

查看動畫詳細資料

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

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

「Details」(詳細資料) 窗格。

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

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

如果某些動畫的 animation-iteration-count 屬性設為 infinite，則會無限期重複播放。「Animations」面板會顯示其定義和疊代。

動畫疊代。

動畫最左邊的深色部分是其定義。右側較淡出的部分 代表疊代

例如，在下一張螢幕截圖中，區段 2 和 3 代表 第一部分的疊代

動畫疊代圖表。

如果兩個元素套用相同動畫，「Animations」面板會指派 同一個顏色。顏色本身是隨機的，不具顯著性。例如，在下方螢幕截圖中 div.eye.left::after 和 div.eye.right::after 這兩個元素具有相同的動畫 (eyes) 和 div.feet::before 和 div.feet::after 元素一樣

使用不同顏色標示的動畫。

修改動畫

您可以使用三種方式使用「Animations」面板修改動畫：

  • 動畫時間長度。
  • 主影格時間。
  • 開始時間延遲。
，瞭解如何調查及移除這項存取權。

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

修改前的原始動畫。

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

修改時間長度。

如果動畫定義了任何主要畫面格規則，就會以白色內部圓圈表示。 拖曳其中一個控制項，即可變更主要畫面格的時間。

修改主要畫面格。

如要為動畫加上延遲時間，請按一下動畫 (而非圓圈)，然後將其拖曳到任何位置。

修改誤點。

即時編輯「@keyframes」

當您在「樣式」中修改 @keyframes 時，可以直接在「動畫」面板中查看特效。

歡迎在這個示範頁面試用這項功能：

  1. 開啟「動畫」面板。它會自動擷取網頁上進行中的脈動動畫。選取動作列控制項下方的動畫。
  2. 在「Elements」Elements中，使用 class="pulser" 檢查元素，然後在「Styles」Elements中找到 @keyframes pulse 區段。
  3. 嘗試修改主要畫面格，例如將第二個主要畫面格從 50% 變更為 20%。
  4. 觀察您對「樣式」所做的變更對「動畫」面板所呈現的動畫有何影響。

在動畫播放期間編輯 ::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)

如要在「元素」Elements中編輯這個結構，請前往樣式：

  1. 開啟開發人員工具，並檢查使用 View Transitions API 的頁面。例如這個示範頁面。
  2. 在「動畫」中按一下「暫停」。

  3. 在網頁上觸發動畫。「Animations」面板會擷取圖片並立即暫停。您現在可以在 DOM 的 <head> 元素頂端找到 ::view-transition 結構。

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

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

  5. 繼續動畫並重播，即可查看結果。

詳情請參閱「透過 View Transitions API 順暢轉換」。