如何使用 Chrome DevTools 檢查 CSS 動畫
CSS 動畫如果做得正確，可以將您的網站提升到另一個水平。但是，如果沒有能夠對這些動畫進行精細控制的工具，創建這些動畫可能會很棘手。如果有一種方法可以準確地看到動畫每一步發生的情況怎麼辦?
利用 Google Chrome 和 Mozilla Firefox 中提供的 DevTools 功能，人們可以深入了解他們的動畫創作並複制在各個網站中找到的動畫作品。
使用 DevTools 進行基本動畫調試
事實上，Google Chrome 的開發者工具提供了一系列有用的功能，用於調試 Web 開發的各個方面，包括但不限於 CSS。這種多功能工具允許用戶探索和分析其網站的性能、識別潛在問題並優化設計元素。作為起點，人們可能會發現利用開發人員工具檢查和調查項目中的動畫很有幫助。
這些插圖的源代碼可以通過GitHub 存儲庫訪問，該存儲庫充當軟件開發項目的數字存儲庫，並通過提供版本控制功能和工具來管理對代碼庫所做的更改，從而促進開發人員之間的協作。
使用 HTML 和 CSS 定義動畫
一個 div 元素和一個按鈕元素。此外，它還包含一個名為“style.css”的 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>
為了對這兩個元素應用一致的外觀，需要在與 HTML 文檔相同的目錄中生成 CSS（層疊樣式表）文件。該文件應包含以下代碼:
#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 @keyframes 指令可以實現紅色框的動畫，而按鈕則使用過渡來進行轉換。通過在瀏覽器的開發人員工具中檢查它們各自的應用程序可以方便地比較這些技術。
使用 DevTools 檢查動畫
要訪問 Chrome 開發者工具中的“動畫”選項卡，請按照以下步驟操作:
右鍵單擊當前網頁將調用上下文菜單，其中提供了用於操作屏幕上顯示的內容或與之交互的各種選項。
⭐單擊檢查。
請單擊屏幕右上角的三個垂直點。
通過導航到“更多工具”類別並從那裡選擇它來訪問“動畫”選項。
此操作將在界面的下部顯示動畫的視覺表示，使用戶能夠訪問和操作這些效果。
本網頁上出現的任何視覺效果均應在本部分內顯示。如果您重新加載頁面並將光標放在指定元素上，則在刷新內容顯示區域時，上述動畫序列將出現在指定的“動畫”選項卡中。
事實上，在單擊任何這些動畫（例如盒子的動畫）時，瀏覽器將以說明其實現策略的方式顯示關鍵幀。
開發者工具展示了與所選元素相關的所有動畫的概述，因為只為紅色容器描繪了一個動畫過程-旋轉和顏色更改-因此，只有與該動畫相關的特定細節才會顯示在界面中。
您可以沿著時間軸調整播放頭的位置，以控制視覺序列的節奏，根據您的喜好加快或延遲其進度。此外，通過在播放和暫停圖標之間切換，可以在特定時刻暫停動畫，從而為您提供對觀看體驗的更好控制。此外，時間線頭部提供的百分比使您能夠操縱動畫的速度，允許降低 25% 的速度，甚至更慢 10% 的速度。
使用開發人員工具檢查按鈕的行為後，可以觀察有助於其視覺轉換的特定屬性，例如顏色和背景顏色。
該實用程序使您能夠修改動畫，以便全面了解其功能。如果存在任何問題，它使您能夠診斷和解決網站可能出現的任何問題。
高級動畫示例
將提供的標記合併到 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;
}
}
將分步動畫應用到所有 div 元素涉及到它們的位置和背景顏色的過渡。此外，採用不同的動畫來控制各個框的步數。
當第三個盒子以一致的方式水平向屏幕右邊緣前進時，最初的一對盒子將同時前進兩步，最終導致它們同時到達顯示區域的終點（從而開始第二個框先於第一個框）。
通過訪問開發人員工具應用程序中的“動畫”選項卡並刷新網頁，人們可以訪問有關網站上存在的任何動畫的全面詳細信息。
在共享的時間間隔中，多個動畫組件串聯存在。具體而言，在此上下文中，三個相應容器中的每一個的統一背景色調和空間坐標經歷並發動畫。
值得一提的是，每個動畫路徑上的標記指示重複序列中每次迭代的開始點和終止點。
空白節點充當動畫序列中的基本關鍵幀，而填充的彩色節點則表示動畫的起始點和終止點。值得注意的是，動畫的每次迭代都會呈現變暗的節點元素。
總之，DevTools 提供了一個用戶友好的界面，用於通過與調整標準 CSS 屬性相同的過程來編輯動畫。通過動畫 UI 所做的任何修改都會實時反映在“樣式”選項卡的內聯樣式部分中，反之亦然。這樣可以方便地測試和復制實際項目的編輯。
使用 Chrome DevTools 調試 CSS
Google Chrome 瀏覽器中的 DevTools 功能是調試級聯樣式表 (CSS)（甚至包括動畫）的高效資源。此功能提供了特定網頁上發生的每個轉換和動畫的全面視角，允許用戶仔細檢查實時發生的精確操作。
作為一名精通 Web 開發的個人，必須全面了解各自瀏覽器的開發人員工具功能或類似的替代方案。