Chrome 檢查動畫教程

2022-09-09 04:09:12 字數 2111 閱讀 5369

使用chrome devtoolsanimations(動畫)檢查器檢查和修改動畫。

在chrome devtools動畫檢查主要有兩個目的。

動畫檢查支援css動畫,css轉換和web動畫。目前不支援requestanimationframe動畫。

動畫組是一組看起來彼此相關的動畫。目前,web中沒有真正的組動畫概念,因此運動設計師和開發人員必須組合和計時單個動畫,以使它們看起來是乙個連貫的視覺效果。animation inspector(動畫檢查器)根據開始時間(不包括延遲等)**哪些動畫相關,並將它們併排分組。換句話說,在同一指令碼塊中觸發的一組動畫會被分到一組,但如果它們是非同步的,那麼它們將被分別分組。

有兩種開啟動畫檢查器的方法:

animation inspector(動畫檢查器)將在console(控制台)抽屜式選項卡旁邊開啟。由於它是乙個抽屜式選項卡,您可以從任何devtools面板中使用它。

animation inspector(動畫檢查器)分為四個主要部分(或窗格)。請看下圖中對應編號的說明:

注:開啟animate.css 檢視演示。

一旦你捕獲到動畫後,這裡有幾種方法可以重播動畫:

一旦你捕獲了乙個動畫組,單擊overview(概述) 窗格中的動畫組來檢視其詳細資訊。在details(詳細)窗格中,每個單獨的動畫都會佔單獨的一行。

將滑鼠懸停在動畫上,在視口中會將其突出顯示。單擊動畫會在elements(元素)面板中選中執行動畫的元素。

動畫的最左邊,顏色較深的部分是它的定義。向右,更淺色部分代表迭代。例如,在下面的截圖中,第二部分和第三部分代表第一部分的迭代。

如果兩個元素應用於相同的動畫,animation inspector(動畫檢查器)會為它們分配相同的顏色。顏色本身是隨機的,沒有意義。 例如,在下面的截圖中這兩個元素div.eye.left::afterdiv.eye.right::after,相同的動畫(eyes)應用於他們,同樣的還有div.feet::beforediv.feet::after元素。

animation inspector(動畫檢查器)中有三種修改動畫的方法:

對於這部分,假設下面的截圖表示原始動畫:

若要更改動畫的持續時間,單擊並拖動第乙個或最後乙個圓圈。

如果動畫定義了任何關鍵幀規則,那麼它們被表示為內部白色圓圈。單擊並拖動其中乙個可以更改關鍵幀的時間控制。

要向動畫新增乙個延遲,點選並拖動它的任何地方,除了圓圈。

git git動畫教程

git學習資料比較好的有廖雪峰的教程 git scm 廖雪峰 git教程 git for windows github 新增 ssh keys gogithub git常規命令練習 git的資料整理 我所記錄的git命令 非常實用 企業開發git工作流模式探索部分休整 github 漫遊指南 git...

Word入門動畫教程131 拼音指南

當我們遇到不認識的漢字時,可以用拼音指南檢視它的讀音,也可以為漢字新增拼音。使用拼音指南的步驟如下 1.選中要檢視讀音的漢字。2.執行 格式 中文版式 拼音指南 開啟 拼音指南 對話方塊。3.在 基準文字 框中已顯示出選定的文字 拼音文字 框中自動給出了每個漢字的拼音,如需對某個文字進行注釋,可在其...

Word入門動畫教程115 突出顯示

突出顯示 可以標記文件中的重要文字,利用word的查詢功能可以快速定位到帶有 突出顯示 標記的文字。一 應用突出顯示 1.在 格式 工具欄上,單擊 突出顯示 按鈕右側的下拉按鈕,選擇一種突出顯示的顏色。如果當前 突出顯示 按鈕顯示的顏色符合要求,可直接單擊此按鈕。2.拖選要突出顯示的文字 或圖形,對...