跳至主要內容
Lizely

CSS 漸進曲線生成器

設計一個有效的 CSS 漸進曲線，並複製其精確的時間函式宣告。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇一個標準的緩動預設值，或輸入 x1、y1、x2、y2 作為控制座標。
  2. 2.檢檢視形、數值進度樣本以及執行預覽動畫，確認所需的時間軸設定。
  3. 3.複製完整的 CSS 宣告，並在實際的屬性、距離與持續時間上測試。

關於CSS 漸進曲線生成器

CSS 漸進曲線生成器將四個控制點座標轉換為符合標準的 CSS 時間函式。可調整 x1、y1、x2 與 y2，或從五種 CSS 漸進關鍵字中選擇啟動。結果會即時更新為圖形、精確的過渡時間函式宣告、五個輸入至輸出樣本，以及動態預覽。所有計算皆在瀏覽器中完成。不會上傳、儲存或傳送任何曲線、CSS 或互動資料至動畫服務。

任何 CSS 三次貝茲漸進曲線皆從進度點零、零開始，並在一點、一點結束。四個可編輯的數值定義兩個中間控制點。x 坐標描述輸入時間位置，因此 CSS 的 x1 與 x2 必須維持在零至一之間。y 坐標描述輸出進度，可低於零或高於一，可能產生預期或過衝。介面限制 x 值在有效 CSS 範圍內，並接受介於負十至正十之間的有限 y 值。純計算會獨立驗證這些限制，再產生輸出。

關鍵字按鈕使用 CSS 漸進函式（Level 1）所定義的控制點。線性對應於零、零、一、一；ease、ease-in、ease-out 與 ease-in-out 則載入其標準化的三次貝茲等效值。選擇關鍵字不會輸出關鍵字本身：顯示的宣告始終會呈現全部四個數值，以便記錄、比較與修改，且無隱藏預設值。僅在序列化時才四捨五入至三位小數；計算過程則保留完整的 JavaScript 數值精確度。

表格回答了控制點圖表無法回答的問題：當給定時間分數經過時，動畫值已前進多少？對於每個輸入值為零、0.25、0.5、0.75 與一的點，求解器會找出曲線引數以產生所需的 x 坐標，再計算對應的 y 值。它首先使用有界牛頓迭代法，必要時改用二分法完成。此做法避免了常見錯誤，即誤將曲線引數當作已過時間，即使 x 控制點使這些值不同。

方格圖顯示從固定起點到固定終點的引數曲線。標準曲線會維持在圖內。刻意極端的 y 值可能超出視覺範圍，因為圖表維持穩定的零至一框架，用以比較常見的時間曲線。樣本表與動態預覽仍使用實際計算出的漸進效果。若需考慮過衝，應檢視移動元素與數值樣本，而非假設圖表被裁剪代表值已被截斷。

執行預覽會在兩個水平位置間切換一個圓，使用 900 毫秒轉換過渡與精確產生的漸進字串。重複點選可比較正向與反向運動。預覽展示的是時間行為，而非在所有工作負載下的實際表現。真實元件在距離、持續時間、屬性、渲染成本、輸入裝置或周圍運動改變時，可能感覺不同。請在最終介面中測試此宣告，並在動畫非必要時尊重減少動畫偏好設定。

複製 CSS 會請求剪貼簿權限，並寫入完整的宣告，包含分號。若瀏覽器政策拒絕存取，宣告仍會可見且可選取，狀態不會宣告成功。該工具不會產生關鍵幀、彈簧物理、linear() 停止清單、steps()、持續時間、延遲、重複次數或完整過渡縮寫。它專注於單一三次貝茲時間函式，因此輸出保持可預測且易於審核。

CSS 允許技術上有效但令人不悅或混淆的曲線。大幅過衝可能讓控制元件看起來反向運作、脫離容器，或顯示出本應被裁剪的內容。有效的曲線並非自動具有可訪問性、效能或合適性。應確保重要狀態變化的動態表現清晰可懂，避免快速振盪，並在元素轉換期間檢查焦點與指標行為。W3C CSS 比例函式層 1 是語法、有效性規則與關鍵字對應的主要來源。MDN 獨立說明三次貝茲曲線行為及瀏覽器導向的範例。對映關係與無效 x 邊界則以可執行的外部金標準案例保留，而非從記憶中取得。

方法與來源

驗證 CSS 的 x 坐標限制、保留有限的 y 過衝、使用牛頓迭代法加上有界二分法求解輸入進度、四捨五入至三位小數，並以測試過的標準關鍵字對應作為參考資料公開。

常見問題

為何 x1 與 x2 必須維持在零到一之間？
它們代表輸入時間的位置。CSS 在任一 x 控制座標超出閉合的零到一範圍時，會被視為無效。
y1 或 y2 可以為負數或大於一嗎？
可以。有效的 y 控制值可能產生負值的預先反應或大於一的過衝，但極端動態應謹慎測試。
為何 50 百分比的樣本不總是對應 t 等於 0.5 時的曲線值？
CSS 的時間設定使用輸入進度作為 x 軸，因此求解器必須先找到 x 坐標為 0.5 的引數，再計算對應的 y 值。
生成器會產生完整的轉換嗎？
不會。它僅輸出轉換時間函式；你仍需選擇動畫屬性、持續時間、延遲以及減少動畫行為。

相關工具

色彩工具 使用指南

查看全部