Cubic Bezier緩動曲線產生器

為CSS建立cubic-bezier緩動曲線。內建標準預設。

a: 0.25

b: 0.1

c: 0.25

d: 1

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

如何使用本工具

1
Click a preset (ease, ease-in, ease-out, or ease-in-out) to load its four control values, or skip this to start from the default ease curve.
2
Drag the a, b, c, and d sliders to adjust the two control points; each ranges from -1 to 2 in steps of 0.05 and the current value shows above the slider.
3
Read the generated transition-timing-function: cubic-bezier(a, b, c, d); line in the output box.
4
Copy that declaration by hand and drop it into your CSS transition or animation rule.

CSS動畫使用緩動（easing）函式來控制數值隨時間變化的方式。cubic-bezier的四個參數定義了一條從（0,0）到（1,1）的曲線：曲線在某一區域越陡，動畫在該區域就越快。常見的預設可以滿足大多數需求；自訂曲線則能創造出與眾不同的動效。

Tuning a button hover or focus transition so it feels snappy on entry and gentle on exit instead of using the generic default ease.
Designing a card or modal that overshoots slightly on open by pushing the d (P2 y) value above 1 for a subtle bounce.
Matching a brand motion spec where designers handed you specific cubic-bezier control points to reproduce in CSS.
Replacing a linear or default easing on a loading spinner or progress bar with a custom acceleration profile.
Quickly grabbing the canonical values behind ease-in-out without memorizing 0.42, 0, 0.58, 1.
Prototyping menu slide-in and drawer animations by comparing how ease-in versus ease-out change the perceived weight of the motion.

ease和ease-in有什麼區別？▼

ease先加速再減速。ease-in只加速。ease-out只減速。ease-in-out則更明顯地兩者兼備。

我什麼時候該使用自訂曲線？▼

當標準緩動顯得過於普通時。微妙的自訂曲線能營造出屬於品牌自身的動效氣質。