我該將轉換放在哪裡,放在基態或懸停態?

將其置於基本狀態。基本規則上聲明的轉換會使屬性在兩個方向上產生動畫 - 進入懸停更改並返回。僅在聲明它:懸停會使更改動畫化,但在指標離開時讓它彈回。

過渡速記的順序是多少?

屬性、持續時間、定時函數、延遲。例如轉換:不透明度 300ms 輕鬆進出 100ms。第一個時間值始終是持續時間,第二個時間值是延遲,因此如果您僅提供一個時間值,則將其讀取為持續時間。

我可以同時轉換多個財產嗎?

是的。用逗號分隔每個轉換,例如轉換:不透明度 300ms 輕鬆,轉換 200ms 輕鬆。當您新增圖層時,此工具會為您建立該列表,為每個屬性提供自己的持續時間、定時函數和延遲。

為什麼我的顯示器:無顯示器:區塊轉換不動畫?

因為顯示不是可動畫屬性 - none 和 block 之間沒有中間值,所以瀏覽器沒有任何中間值。相反,將過渡不透明度和可見性放在一起,或使用過渡行為:允許較新瀏覽器中的離散行為從顯示中淡出元素:無。

什麼是三次貝塞爾時序函數?

cubic-bezier (x1, y1, x2, y2) 使用兩個控制點定義自訂加速曲線。關鍵字「輕鬆」、「輕鬆」、「輕鬆」和「輕鬆」都是特定立方貝塞爾值的捷徑。 y 值高於 1 或低於 0 的控制點會產生超調或預期,這就是反彈效果的建構方式。

我應該為哪些屬性製作動畫才能獲得流暢的性能?

喜歡變換和不透明度。它們在 GPU 上合成,不會觸發佈局,因此它們以 60fps 的速度進行動畫處理。動畫寬度、高度、頂部、左側或邊緣迫使瀏覽器重新計算每個幀的佈局,這是口吃轉換的最常見原因。

這個 CSS 轉換產生器會將我的資料傳送到任何地方嗎?

不。預覽和 CSS 輸出完全在您的瀏覽器中使用 JavaScript 產生。沒有上傳或儲存任何東西，一旦頁面載入，該工具將繼續工作，無需網路連線。

CSS 轉換產生器

Q: 我該將轉換放在哪裡,放在基態或懸停態?

將其置於基本狀態。基本規則上聲明的轉換會使屬性在兩個方向上產生動畫 - 進入懸停更改並返回。僅在 聲明它:懸停會使更改動畫化,但在指標離開時讓它彈回。

Q: 這個 CSS 轉換產生器會將我的資料傳送到任何地方嗎?

不 。 預覽和 CSS 輸出完全在您的瀏覽器中使用 JavaScript 產生。 沒有上傳或儲存任何東西，一旦頁面載入，該工具將繼續工作，無需網路連線。

透過即時懸停預覽從屬性、持續時間、定時函數和延遲建立 CSS 轉換,然後複製生產就緒程式碼。支援多層。

Presets

Toolz

Layers

Layer 1

Property

Timing function

Duration300ms

Delay0ms

Generated CSS

transition: all 300ms ease;

Category:css

Mode:Offline

Version:1.0.0

Access:Free

什麼是 CSS 轉換產生器?

CSS 轉換產生器是 CSS 轉換屬性的視覺化編輯器。您可以選擇要設定動畫的屬性、設定持續時間、選擇定時函數並添加延遲,然後觸發即時預覽以在複製聲明之前觀看精確的緩動。您可以在一個簡寫中分層多個轉換 - 例如在移動轉換時褪色不透明度 - 並且每一層都有自己的屬性、持續時間、時序和延遲。

轉換告訴瀏覽器啟動屬性兩個值之間的更改,而不是立即切換。在懸停時更改背景顏色,無需轉換即可快照;新增過渡:背景顏色輕鬆 200 毫秒,相同的更改在五分之一秒內輕鬆完成。過渡存在於基本狀態,而不是懸停狀態,因此元素會在更改中產生動畫,這使得互動感覺已完成,而不是在返回途中突然發生。

一切都發生在您的瀏覽器中。從「淡入淡出」、「按鈕懸停」或「彈跳」等預設開始,調整滑桿並進行選擇,按預覽觸發器查看運動,然後複製簡寫。該工具按照規範要求的順序編寫四個部分 - 屬性、持續時間、定時功能、延遲 - 並在延遲為零時省略延遲。沒有帳戶,沒有上傳,一旦頁面加載,它就會保持離線工作。

最常見的錯誤是嘗試轉換沒有中間值的屬性。顯示:無要顯示:區塊無法動畫化,因為顯示不是可動畫屬性 - 沒有中間的 none 和 block - 這就是為什麼單獨基於顯示內建的淡入會跳轉。修復方法是將不透明度和可見性一起轉換,或使用較新的允許離散行為。還值得將變換和不透明度動畫化,而不是寬度、高度、頂部或左側:前兩個在 GPU 上合成,不觸發佈局,因此它們保持平滑,同時動畫佈局屬性重新計算每個框架上的頁面,並且是通常的來源。軟糖、口吃的過渡。

如何使用CSS過渡產生器?

選擇預設或屬性

從「淡入淡出」、「按鈕懸停」或「彈跳」等預設開始,或選擇要設定動畫的屬性 - 不透明度、變換、背景顏色或全部。

設定持續時間、輕鬆和延遲

拖曳持續時間和延遲滑桿並選擇計時函數 - 輕鬆、線性、三次貝塞爾曲線或步長。當您進行操作時,這些值會在簡寫中更新。

預覽動議

按下觸發器在預覽元素上播放過渡。由於轉換需要狀態變更才能運行,因此預覽會在兩個狀態之間切換,以便您可以看到緩動。

複製 CSS

複製產生的轉換速記並將其貼到元素的基本狀態,而不是懸停狀態,因此它會在兩個方向上動畫。

主要特點

多個過渡層

新增和刪除圖層以同時為多個屬性設定動畫 - 每個屬性都有自己的屬性、持續時間、定時函數和延遲 - 連接到一個逗號分隔的簡寫中

真正的緩和曲線

四個 CSS 關鍵字加上精選的立方貝塞爾預設,包括材料標準曲線和超調後退曲線,以及逐幀運動的步數 () 函數

即時懸停預覽

觸發器透過在兩種狀態之間切換來播放預覽元素上的過渡,因此您在複製單行之前可以感受到時間安排和輕鬆

正確的速記順序

輸出遵循屬性、持續時間、定時函數和延遲的規範順序,並在延遲為零時丟棄延遲,以便 CSS 保持乾淨

Frequently Asked Questions

CSS 轉換會在設定的持續時間內對屬性的兩個值之間的變更進行動畫處理,而不是立即切換。您在基本狀態上定義它一次,並且每當屬性值發生變化時(例如在懸停時或切換類別時),瀏覽器都會簡化該屬性。

Related Tools

CAG

css

CSS Animation Generator

Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.

CGG

css

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.

CTG

css

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.

CGG

css

CSS Glassmorphism Generator

Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.

Comments

0 comments

No comments yet. Be the first to share your thoughts!

css transition generatorcss transitiontransition csscss hover effecttransition timing functioncubic beziercss easetransition delaycss animation timing

了解更多

閱讀完整的 CSS 轉換產生器指南

Command Palette