@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}什麼是 CSS 動畫產生器?
CSS 動畫產生器是 CSS 關鍵影格動畫的視覺化編輯器。您選擇一個運動預設,例如淡入、滑動、縮放、彈跳、旋轉或脈衝,調整持續時間、定時功能、延遲、迭代次數、方向和填充模式,觀看它在即時預覽中運行,然後複製兩件事:定義運動和播放它的動畫速記的@keyframes 規則。它將大多數人從記憶體或框架複製的 CSS 區塊變成您可以在它到達樣式表之前塑造和看到的東西。
CSS 動畫有兩半必須一致。 @keyframes 規則命名了一系列步驟,每個步驟都寫成百分比偏移量,其中包含元素在該點應保留的屬性值,例如不透明度0 時的0% 和不透明度1 時的100%。然後動畫屬性引用該關鍵幀名稱並控制它如何播放:它持續多久、如何緩解、開始前等待多久、重複多少次以及每次傳遞運行的方向。拼字錯誤的名稱是動畫默默地什麼都不做的最常見原因,因為瀏覽器沒有規則可以綁定。
一切都在您的瀏覽器中運行。選擇預設,拖曳持續時間和延遲滑桿,切換緩動曲線,將動畫設定為永遠重複或固定次數,然後按重播再次觀看。該工具以安全順序寫入簡寫,首先使用關鍵影格名稱,在延遲為零時刪除延遲,並省略與其 CSS 預設相符的任何部分,以便輸出保持可讀性。沒有帳戶,沒有上傳任何內容,一旦頁面載入,生成器就會繼續工作。
它還使性能權衡可見。預設盡可能使變換和不透明度變得生動,因為這兩個屬性由合成器處理,不會迫使瀏覽器重新計算佈局,因此它們在高幀速率下保持平滑。動畫寬度、高度、頂部或邊距會重新計算每一幀上的頁面,這是口吃的常見原因。看到由translatelyY而不是top構建的彈跳比閱讀任何有關它的內容更快地說明為什麼一個人是平滑的。
如何使用CSS動畫產生器?
選擇動畫預設
從預設清單中選擇一個動作,例如淡入、滑入、縮放、彈跳、旋轉、脈衝或搖晃。每個預設都會載入其關鍵影格以及合理的預設持續時間和緩動。
調整時機和播放
設定持續時間和延遲,選擇定時函數,決定動畫重複固定次數還是無限次,並選擇方向和填充模式。
預覽並重播
觀看動畫在預覽元素上運行,然後按重播重新啟動它。由於動畫在安裝座上運行,因此重播會重新安裝該元素,以便您可以根據需要經常查看它。
複製 CSS
將產生的@keyframes規則和動畫速記複製在一起,然後將它們貼到樣式表中並將類別套用到任何元素。
主要特點
關鍵影格預設庫
十四個現成的動作涵蓋入口、出口和循環效果,從淡入淡出和滑動到彈跳、旋轉、脈搏、搖晃、翻轉和心跳,每個動作都用真實的關鍵幀停止來定義
完整的播放控制
設定持續時間、延遲、定時函數、迭代次數、方向、填充模式和播放狀態,並立即查看速記和即時預覽中反映的每一個變更
關鍵影格和速記在一起
輸出包括@keyframes 規則和與其綁定的動畫速記,因此您可以複製一個完整的工作區塊,而不是一個工作區塊的一半
清潔、規格正確的輸出
速記首先使用關鍵影格名稱編寫,延遲為零時刪除,並省略任何預設值,因此產生的 CSS 會按照您手動編寫的方式讀取
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!