CSS 緩動曲線產生器
拖曳兩個把手捏出緩動曲線,讓小球沿著它和等速運動賽跑,cubic-bezier() 值隨時複製。
第一個控制點
第二個控制點
你的曲線
linear
cubic-bezier(0.25, 0.1, 0.25, 1)曲線都在你的瀏覽器裡繪製,這裡設定的內容不會上傳到 BroBroGo。
常見問題
兩個把手和四個數字是什麼意思?
曲線從左下角(開始)走到右上角(結束):橫軸是時間,由左到右;縱軸是進度,由下往上。兩個把手就是讓曲線彎曲的控制點,每個把手有一個 X 和一個 Y,合起來就是 cubic-bezier(x1, y1, x2, y2)。X 始終在 0 到 1 之間,而 Y 可以超出上緣或低於下緣,讓動畫在停下前先衝過頭,或先往回拉一下。
產生的值怎麼用到 CSS 裡?
把 cubic-bezier() 複製走,填到任何需要緩動函式的地方——transition-timing-function、animation-timing-function,或者簡寫,例如 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)。ease、ease-in、ease-out、ease-in-out 這些關鍵字其實就是固定的 cubic-bezier 曲線,點對應的預設就能看到關鍵字背後的具體數值。
能做出彈跳(bounce)或彈性(elastic)效果嗎?
單靠它做不到。一條 cubic-bezier 可以先蓄力、再衝過頭——“back”預設就是把一個把手拉出方框來實現的——但它只能朝一個方向走完再停下。彈跳和彈性會來回反轉好幾次,任何單條 cubic-bezier 都表達不了,那需要 CSS keyframes,或帶許多分段的 linear() 函式。