如何檢查 CSS 動畫 Chrome 開發工具

像您這樣的讀者幫助支持 MUO。當您使用我們網站上的鏈接進行購買時，我們可能會賺取聯屬佣金。閱讀更多。

CSS 動畫如果做得正確，可以將您的網站提升到另一個水平。但是，如果沒有能夠對這些動畫進行精細控制的工具，創建這些動畫可能會很棘手。如果有一種方法可以準確地看到動畫每一步發生的情況怎麼辦？

兩者的 DevTools 功能 Google Chrome 和 Firefox 具有檢查動畫的能力。了解如何使用此功能來改進您自己的動畫並對您最喜歡的網絡動畫進行逆向工程。

使用 DevTools 進行基本動畫調試

Chrome的 DevTools 是調試 CSS 各個方面的好方法，甚至更多。從這個簡單的開始 example 了解如何使用它來檢查動畫。

這些示例的代碼可在 GitHub 存儲庫。

使用 HTML 和 CSS 定義動畫

以下 HTML 呈現一個包含兩個元素的頁面：

和一個 <按鈕>。該頁面還導入了一個名為 樣式.css:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box"></div>
    <button>Test Button</button>
  </body>
</html>

要設置這兩個元素的樣式，請創建一個 樣式.css 文件與 HTML 位於同一文件夾中，並添加以下內容：

 #box {
  background: red;
  height: 400px;
  width: 400px;
  margin-bottom: 1rem;
  animation: rotateAndChangeColor 1000ms ease-in-out;
}

button {
  font-size: larger;
  background-color: white;
  border: 1px solid black;
  padding: 0.5em 1em;
  color: black;
  height: 80px;
  width: 300px;
  border-radius: 0.5em;
  transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
  cursor: pointer;
}

button:hover {
  background-color: black;
  color: white;
}

@keyframes rotateAndChangeColor {
  0% {
    rotate: 0deg;
    background: red;
  }
  10% {
    background: green;
  }
  40% {
    background: blue;
  }
  70% {
    background: yellow;
  }
  100% {
    rotate: 360deg;
    background: red;
  }
}

這些樣式創建兩個組件：

一個簡單的盒子，在頁面加載時旋轉並改變顏色。
當您將鼠標懸停在其上時會更改其背景顏色的按鈕。

請注意，紅色框使用 CSS @keyframe 指令進行動畫處理，而按鈕則使用過渡。這使您可以使用瀏覽器的開發工具來比較這兩種方法。

使用 DevTools 檢查動畫

要訪問動畫標籤進入 Chrome 開發工具：

右鍵單擊您的頁面以顯示上下文菜單。
點擊檢查。
單擊右上角的三點。
導航 更多工具 > 動畫。

這將打開底部的動畫抽屜。

頁面上出現的任何動畫都會顯示在此處。如果刷新頁面並將鼠標懸停在按鈕上，動畫將顯示在動畫選項卡下。

當您單擊這些動畫之一時，真正的力量就會顯現出來。為了 example，如果單擊該框的動畫，您將看到瀏覽器呈現如下關鍵幀：

DevTools 顯示與您選擇的元素相關的所有動畫。由於只為紅色框定義了一個動畫 –旋轉並改變顏色—您只會看到它的詳細信息。

您可以將線拖動到左側以使動畫更快，或將其拖動到右側以減慢動畫速度。您還可以通過切換暫停和播放圖標在某些點暫停動畫。頂部的百分比允許您分別以正常速度的四分之一和十分之一的速度播放動畫。

當您檢查按鈕轉換時，DevTools 將顯示轉換的各個屬性：顏色和背景顏色。

該工具可讓您操縱動畫以準確查看其工作原理。如果出現任何問題，您可以使用它來解決您的網站問題。

高級動畫示例

首先替換 HTML 中的標記 <正文> 帶有以下標記的標籤：

 <div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>

然後替換你的所有樣式 樣式.css 文件與此：

 .move-me {
  display: inline-block; 
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
}

.move-me-1 {
  animation: move-in-steps 8s steps(4, end) infinite;
}

.move-me-2 {
  animation: move-in-steps 8s steps(4, start) infinite;
}

.move-me-3 {
  animation: move-in-steps 8s infinite;
}

body {
  padding: 20px;
}

@keyframes move-in-steps {
  0% {
    left: 0;
    background: blue;
  }

  100% {
    left: 100%;
    background: red;
  }
}