CSS 動畫產生器

CSS 動畫產生器是 CSS 關鍵影格動畫的視覺化編輯器。您選擇一個運動預設,例如淡入、滑動、縮放、彈跳、旋轉或脈衝,調整持續時間、定時功能、延遲、迭代次數、方向和填充模式,觀看它在即時預覽中運行,然後複製兩件事:定義運動和播放它的動畫速記的@keyframes 規則。它將大多數人從記憶體或框架複製的 CSS 區塊變成您可以在它到達樣式表之前塑造和看到的東西。

CSS 動畫有兩半必須一致。 @keyframes 規則命名了一系列步驟,每個步驟都寫成百分比偏移量,其中包含元素在該點應保留的屬性值,例如不透明度0 時的0% 和不透明度1 時的100%。然後動畫屬性引用該關鍵幀名稱並控制它如何播放:它持續多久、如何緩解、開始前等待多久、重複多少次以及每次傳遞運行的方向。拼字錯誤的名稱是動畫默默地什麼都不做的最常見原因,因為瀏覽器沒有規則可以綁定。

一切都在您的瀏覽器中運行。選擇預設,拖曳持續時間和延遲滑桿,切換緩動曲線,將動畫設定為永遠重複或固定次數,然後按重播再次觀看。該工具以安全順序寫入簡寫,首先使用關鍵幀名稱,在延遲為零時刪除延遲,在正常時省略方向,在沒有延遲時刪除模式,因此輸出保持可讀。迭代計數和定時函數始終被寫入,即使處於預設值。沒有帳戶,什麼都沒有上傳,一旦頁面載入,生成器就會繼續工作。

它還使性能權衡可見。預設盡可能使變換和不透明度變得生動,因為這兩個屬性由合成器處理,不會迫使瀏覽器重新計算佈局,因此它們在高幀速率下保持平滑。動畫寬度、高度、頂部或邊距會重新計算每一幀上的頁面,這是口吃的常見原因。看到由translatelyY而不是top構建的彈跳比閱讀任何有關它的內容更快地說明為什麼一個人是平滑的。

以下是此 CSS 動畫產生器針對一個預設產生的內容,因此您可以根據自己的副本進行檢查。按一下"彈跳",控制項加載 1200ms,輕鬆且無限,而填充模式則保持兩者的預設值。複製 CSS 為您提供七站@keyframes 彈跳規則以及包含動畫的。動畫元素規則:彈跳 1.2 輕鬆無限;將延遲拖曳到 300ms,速記變為彈跳 1.2 輕鬆 0.3 無限,延遲放置在計時功能之後。任何動畫產生器 CSS 輸出都應遵循該順序,因為第一個時間值始終被讀取為持續時間。