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则更明显地两者兼备。

我什么时候该使用自定义曲线？▼

当标准缓动显得过于普通时。微妙的自定义曲线能营造出属于品牌自身的动效气质。