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() 函数。