无需登录 数据私有 本地保存

CSS缓动函数试玩场 - 所有预设一览

10
0
0
0
自定义 Cubic-Bezier 编辑器
0.25
0.10
0.25
1.00
cubic-bezier(0.25, 0.1, 0.25, 1)
拖动Canvas控制点或调节滑块
预设缓动函数一览
速度:
点击卡片单独演示

常见问题 & 知识点

什么是 cubic-bezier 缓动函数？

cubic-bezier 是 CSS 中定义动画速度曲线的函数。它使用三次贝塞尔曲线来描述动画属性随时间变化的速率，由四个参数 (x1, y1, x2, y2) 定义，其中 x1 和 x2 必须在 0 到 1 之间。

ease-in 和 ease-out 有什么区别？

ease-in（缓入）动画开始时较慢，然后加速；适合元素离开屏幕时使用。ease-out（缓出）动画开始时较快，然后减速；适合元素进入屏幕时使用，给人自然的感觉。

Back 缓动函数有什么特点？

Back 缓动函数会让动画在开始或结束时"超出"目标值再回弹（y 值超出 0-1 范围）。例如 ease-out-back 常用于弹窗出现效果，给用户一种有弹性的活泼感觉。

如何在 CSS 中使用 cubic-bezier？

在 animation-timing-function 或 transition-timing-function 属性中使用，例如：
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

为什么 x1 和 x2 必须限制在 0-1 之间？

在 CSS 规范中，x 轴代表时间进度（0 到 1），曲线必须在这个时间范围内定义。如果 x 值超出范围，浏览器无法正确计算动画进度。而 y 值（动画输出）可以超出 0-1，这正是 Back 等弹性效果的原理。

如何选择适合的缓动函数？

UI 过渡推荐使用 ease-out（元素出现）和 ease-in（元素消失）；弹窗推荐 ease-out-back；hover 效果推荐 ease-in-out；持续循环动画使用 linear 或 ease-in-out。

🔧 相关工具