每個開發人員都複製了一個區塊 @keyframes 從堆疊溢出的答案中,將其貼上、刷新,發現該元素完全靜止。十分之九的原因很無聊:動畫名稱 @keyframes 規則與中的名稱不符 animation 速記,或持續時間為零,或課程從未落在元素上。另一個原因是關鍵影格動畫是 CSS 的角落之一,您無法透過讀取程式碼來判斷結果。一系列百分比和變換不會告訴您該運動是否感覺平滑、活潑或暈船,直到您觀看其運行。
CSS 動畫是瀏覽器'用於隨著時間的推移透過指定的樣式序列移動元素的機制。與將單一變更動畫化並等待觸發器的轉換不同,動畫遵循 a @keyframes 腳本具有任意數量的步驟,可以永遠循環,並在應用的那一刻自行開始。正是載入旋轉器、注意力脈衝、入口效果以及使介面感覺活躍的每一點環境運動的能力。但兩半、關鍵影格和簡寫必須完全一致,簡寫將七到八個值按照大多數人永遠不會記住的順序排列在一行中。
的 CSS 動畫產生器 消除猜測。您從預設庫中選擇一個動作,調整持續時間、緩動、延遲、迭代次數和方向,然後觀看它在即時預覽元素上播放。該工具同時寫入 @keyframes 規則與匹配 animation 速記到一個可複製的框中,名稱已經同步,因此您貼上區塊第一次就可以了。
TL;DR: CSS 動畫透過 a 移動元素
@keyframes隨著時間的推移進行排序,與過渡不同,它不需要觸發並且可以循環。這@keyframes名字和animation-name必須完全匹配,這是動畫不做任何事情的最常見原因。簡寫包含名稱、持續時間、時序功能、延遲、迭代計數、方向和填充模式。更喜歡動畫transform和opacity為了平滑、合成的運動。此產生器為您提供十四個預設、完整的播放控制和即時預覽,並一起發出關鍵影格和簡寫。它完全在您的瀏覽器中運行,無需註冊。
CSS 動畫產生器解決了什麼問題?
關鍵影格動畫的尷尬之處在於往返。要手動調整彈跳,請寫出 @keyframes 規則,寫上 animation 行、儲存檔案、切換到瀏覽器、等待重新載入、觀看。如果退回過於激進,請更改一個 translateY 重視並再次完成整個循環。因為這個週期很慢,所以大多數人接受看起來不損壞的第一個版本,而不是感覺正確的版本,而這兩個版本之間的區別正是將經過深思熟慮的介面與模板分開的潤色。
生成器會折疊成單擊循環。您選擇預設,拖曳持續時間滑桿,預覽元素立即播放您面前的動作。切換定時功能 ease 曲線更貝塞爾,感覺的變化是即時的。將迭代計數設為無限,動畫循環即可研究它。幾分鐘後,您就可以直觀地了解六百毫秒與一千二百毫秒的對比,這就是您在其他地方做出良好運動決策所需的感覺。
還有一個正確性的論點。你不能產生一個格式錯誤的 animation 從選單和拖曳滑桿中進行選擇即可獲得價值,並且您不能錯誤輸入關鍵影格名稱,因為該工具將速記綁定到它產生的關鍵影格。輸出始終可以安全貼上。這種可靠性與我讓視覺 CSS 建構器接近其他屬性的原因相同,與伸手背後的本能相同 梯度發生器 而不是計算顏色在我的腦海中停止,或者 箱形陰影產生器 而不是猜測模糊半徑。
CSS 動畫與 CSS 過渡有何不同?
這會不斷讓人們興奮起來,所以值得精確地說。過渡在兩個狀態之間動畫化單一屬性,並且需要在運行之前進行一些更改,一個懸停,一個焦點,一個切換的類別。它有一個起始值和一個結束值,中間沒有任何值。相較之下,動畫遵循 a @keyframes 規則可以定義任意數量的中間步驟,因此元素可以移動整個編排,而不是從 A 到 B 的直線。它也不等待任何事情:應用它並播放。
實際結果是,當您想要平滑狀態變更時,您可以進行轉換;當您想要元素固有的運動時,您可以進行動畫轉換。懸停時變暗的按鈕是過渡。永遠旋轉的旋轉器、脈衝吸引眼睛的徽章或隨著頁面加載而向上滑動的卡片都是動畫,因為運動是自行發生的並且經常重複。如果您仍在決定給定的效果需要哪一個,經驗法則很簡單:如果使用者操作啟動它並且它以一種方式進行,則使用過渡;如果它單獨播放、循環播放或具有兩個以上步驟,請使用動畫。 CSS 轉換產生器 是第一個案例的配套工具,兩個案例涵蓋了您將要編寫的大部分動議。
| 方面 | 過渡 | 動畫 |
|---|---|---|
| 觸發 | 需要狀態改變(懸停、焦點、類別) | 應用後自行開始 |
| 步驟 | 二、開始和結束 | 任何號碼,透過 @keyframes |
| 循環 | 不,每次更改運行一次 | 是的,與 iteration-count |
| 典型用途 | 懸停和聚焦效果 | 旋轉器、脈衝、入口 |
動畫速記的正確順序是什麼?
的 animation 速記是密集的。它可以承載關鍵影格名稱、持續時間、定時函數、延遲、迭代計數、方向、填充模式和播放狀態,所有這些都在一行上,並且順序對於兩個時間值的重要性與它的作用完全相同。過渡。例如,此產生器首先寫入名稱,然後寫入持續時間和定時函數,然後寫入可選的延遲,然後寫入迭代計數、方向和填充模式 animation: fadeIn 0.6s ease 1 both. 首先寫名字是合法的,因為關鍵字名稱不是 CSS 關鍵字,而且讀起來比把名字埋在最後更清楚。
捕捉每個人的唯一規則是兩個時間值。持續時間和延遲都是倍數,CSS 僅按位置區分它們:第一個時間值是持續時間,第二個時間值是延遲。速記中的其他所有內容都是關鍵字或無單位數字,因此不能與時間混淆。這就是為什麼該工具可以在延遲為零時安全地丟棄延遲,因為延遲是無單位的 1 或者這個詞 infinite 接下來無疑是迭代計數,而不是第二次。生成器還省略了等於其 CSS 預設值的任何值,因此 a normal 方向或a none 填充模式永遠不會使輸出混亂。結果是一個速記,一旦您知道了規則,它就會以您手動編寫的方式讀取它。
為什麼我的 CSS 動畫不播放?
這就是懸崖,幾乎每個人都至少走過一次。最常見的原因是兩者之間的不匹配 animation-name 和名字在 @keyframes 規則。拼字錯誤、大寫差異或名稱在一個地方而不是另一個地方重新命名,導致瀏覽器沒有關鍵影格規則可供綁定,因此它默默地什麼都不做。沒有錯誤,也沒有警告;該元素就坐在那裡。因為這個生成器將同一名稱中的兩半寫在一起,所以整個類別的錯誤消失了,這是該點的很大一部分。
其他原因也值得了解,因為它們會在您手寫動畫時出現。持續時間為零意味著動畫立即完成,而您永遠不會看到它。一個元素是 display: none 根本不運行其動畫,因此取決於所渲染元素的淡入不會觸發。關鍵影格內遺失或拼字錯誤的屬性會被悄悄忽略而不是標記。以及動畫 animation-fill-mode: none(預設情況下)在元素完成時將其恢復為未指定的樣式,如果動作很微妙,則看起來它永遠不會運行。在即時預覽中觀看動畫大部分會在幾秒鐘內浮出水面,這就是構建運動的情況,您可以在其中看到它,而不是在不斷重新加載的文件中看到它。
動畫填充模式有什麼作用?
填充模式是人們最了解、最需要的設定。它決定元素在動畫之外顯示什麼樣式's 活動窗口,無論是在任何延遲期間開始之前還是結束後。預設情況下, none, 表示該元素在動畫不運行時忽略第一個和最後一個關鍵幀,因此它在動畫之前處於正常樣式,然後在動畫之後彈回它們。這種回彈是一種非常常見的挫敗感的根源:你給一個元素製作動畫以淡入,它會漂亮地淡入,然後當動畫結束時它會再次消失,因為 none 決賽 opacity: 1 動畫結束後,關鍵影格將被丟棄。
修復是 animation-fill-mode: forwards,它保持動畫完成後應用的最後一個關鍵幀,因此淡入的元素保持可見。 backwards 在動畫開始之前的任何延遲期間套用第一個關鍵影格,當您有延遲並且不希望元素首先在其預設狀態下閃爍時,這非常有用。 both 同時執行這兩種操作,並且是入口動畫最安全的一般選擇,這就是為什麼此生成器預設使用新動畫的原因 both. 了解填充模式是著陸入口和自行撤消入口之間的區別,透過在預覽中切換它並觀看結局變化比冷讀規範更容易掌握。
動畫應該何時循環,以及如何控制它?
迭代次數決定動畫運行的次數。將其設為正整數,動畫重複多次然後停止;將其設定為 infinite 它永遠循環。循環動畫是環境、持續運動的正確選擇,是顯示工作正在發生的旋轉器,是保持行動呼喚活力的脈衝,是賦予英雄形象一些生命的微妙浮動。一次性動畫,運行一次,用於入口和出口,其中運動有清晰的開始和結束,重複它會分散注意力。
方向與迭代計數配對以塑造每次傳遞的運作方式。預設的 normal 播放從第一個關鍵影格到最後一個關鍵影格的每次迭代。 reverse 將每一項向後播放。 alternate 向前運行第一次傳遞,向後運行下一次傳遞,在端點之間乒乓球,這就是如何在不定義關鍵影格中的回程的情況下建立平滑的來回脈衝。 alternate-reverse 向後開始並從那裡交替。產生器暴露所有四個,以便您可以感受到差異:脈衝 alternate 自然地吸氣和呼氣,同時使用相同的關鍵影格 normal 偶數個步驟必須對返回本身進行編碼。對於循環運動, alternate 幾乎總是用更少的關鍵影格工作產生更有機的結果。
我應該為哪些屬性製作動畫才能獲得流暢的性能?
您動畫的屬性決定運動是每秒平滑運行六十幀還是結巴,並且選擇與轉換相同。優先 transform 和 opacity。 兩者都可以交給合成器並製作動畫,而無需瀏覽器重新計算頁面佈局,因此即使在適度的硬體和負載下,它們也能保持流暢。這就是為什麼卡片會向上滑動的原因 transform: translateY 當同一張卡片動畫時,感覺毫不費力 top 或者 margin-top 感覺很粗糙。此產生器中的每個預設入口都是基於此 transform 和 opacity 正是因為這個原因。
避免在關鍵影格序列中製作動畫的屬性是觸發佈局的屬性: width, height, top, left, margin 和 padding。 更改其中任何一個都會迫使瀏覽器在每個幀上重新計算元素及其周圍所有內容的幾何形狀,這是昂貴的,也是製作動畫最常見的原因,當動畫循環並持續支付該成本時,情況會變得更糟。如果你想要一個元素成長,一個 transform: scale 幾乎總是比動畫便宜 width 和 height,而且看起來幾乎是一樣的。組裝一套工具來引導您走上廉價道路的更廣泛的論點是 web 開發人員工具包 片段,以及使運動成為快速決策而不是緩慢決策的工作流程習慣都在其中 開發人員生產力工具 指南。
生成器如何保持預覽誠實?
每個視覺化建構器都面臨著預覽和匯出程式碼漸行漸遠的風險,直到工具教您一個無法重現的值。此生成器注入精確值 @keyframes 規則它輸出到頁面並應用精確的規則 animation 簡寫它向您顯示預覽元素,因此您觀看的運動就是複製的 CSS 將產生的運動。沒有單獨的動畫路徑可能不一致,預覽中的關鍵影格名稱是輸出中的名稱。
由於動畫在安裝座上運行然後完成,因此預覽需要一種重玩它的方法,該工具透過在按下重播時重新安裝預覽元素來處理這種方法。這反映了一次性動畫在製作中的行為方式,當元素出現時它會播放,然後根據填充模式保持其最終狀態。輸出也保持最小,刪除零延遲和任何預設值,因此您只能複製有意義的聲明,這與不發出任何冗餘的相同規則貫穿始終 CSS 濾波器產生器 以及其他視覺建構器。當您將關鍵影格動畫與定位元素的佈局配對時, flexbox 產生器 是建造周圍結構的天然伴侶。
哪些瀏覽器支援 CSS 動畫?
目前每個瀏覽器都支援 CSS 動畫,並且已經支援十多年了。這 @keyframes 規則,the animation 速記及其所有長手都是通用且無前綴的,因此此產生器的輸出可在 Chrome、Firefox、Safari 和 Edge 中運行,沒有供應商前綴或後備。最終的參考是 W3C 的 CSS 動畫 1 級規範,它是速記每個部分行為方式的主要來源,一旦生成器讓您對這些片段的功能有了物理感覺,就值得一讀。為了可訪問性,請記住一些用戶設定了一個 prefers-reduced-motion 偏好,並且將非必要的循環動畫包裝在尊重它的媒體查詢中是很好的做法,因此對於那些覺得不舒服的人來說,可以關閉環境運動。
如果您正在組裝更廣泛的視覺化 CSS 工具、轉換產生器和 CSS 變換產生器 自然地坐在這個旁邊,因為變換是原材料,大多數動畫都會移動,而過渡處理動畫不會的狀態變化。這裡的所有內容都在客戶端運行,您複製的 CSS 就是您的使用,沒有運行時、沒有構建步驟和依賴性。
常見問題
什麼是 CSS 動畫產生器?
CSS 動畫產生器是一種視覺化工具,可根據您選擇的設定建立關鍵影格動畫。您選擇預設,設定持續時間、緩動、延遲、迭代計數和方向,然後輸出 @keyframes 規則與 animation 速記和即時預覽您可以重播。
CSS 動畫和 CSS 轉換有什麼不同?
過渡會在兩種狀態之間產生單一變更動畫,並且需要觸發器(例如懸停)才能運行。動畫遵循 a @keyframes 具有任意數量的步驟的序列,可以循環,並在應用後立即自行開始,無需等待狀態變更。
動畫速記使用什麼順序?
該工具首先寫入關鍵影格名稱,然後寫入持續時間、定時函數、延遲、迭代計數、方向和填充模式,例如動畫:淡入 0.6 秒可輕鬆 1 兩者。第一個時間值始終是持續時間,第二個時間值始終是延遲,因此將單一時間值讀取為持續時間。
如何永遠製作 CSS 動畫循環?
將迭代計數設為無限。在速記中,單字「無限」與動畫一樣:旋轉 1s 線性無限。相反,任何正整數都會重複動畫多次,然後根據填充模式和方向停止。
為什麼我的 CSS 動畫不播放?
最常見的原因是動畫名稱和@keyframes名稱之間的不匹配,包括拼字錯誤或大小寫差異,這使得瀏覽器沒有規則可以綁定。也請檢查持續時間是否高於零以及元素是否已渲染,因為顯示器上的動畫:沒有元素不運行。
動畫填充模式屬性有什麼作用?
填充模式決定元素在動畫開始之前和結束後顯示的樣式。預設動畫結束時,不會將元素彈回正常樣式。向前設定保留最終關鍵幀,向後設定延遲期間應用第一個關鍵幀,兩者都執行。
我應該為哪些屬性製作動畫才能獲得流暢的性能?
喜歡變換和不透明度。瀏覽器可以在合成器上為它們製作動畫,而無需重新計算佈局,因此它們可以保持 60fps 的平滑度。動畫寬度、高度、頂部、左側或邊緣迫使每個幀重新計算佈局,這是動畫結巴的常見原因。
產生的動畫 CSS 是否免費且安全使用?
是的。該工具完全免費,沒有註冊或使用限制,並且每個現代瀏覽器都支援標準的、無前綴的 CSS。所有處理都發生在您的瀏覽器中,因此不會上傳任何內容,並且工具在載入後會離線工作。
