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

缓动函数沙盒 - 自定义贝塞尔及steps试玩

前端设计 教育工具 CSS 动画 缓动
66
0
0
0

🎯 缓动函数沙盒

可视化编辑 cubic-bezier 与 steps 缓动函数，实时预览动画效果

快捷预设：
P1 · x1
P1 · y1
P2 · x2
P2 · y2
🎬 动画预览
0%50%100%
速度 1×
📋 CSS 代码
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

💡 可用于 transition-timing-function 或 animation-timing-function

平滑过渡，略带加速
📚 常见问题 & 知识点
什么是 cubic-bezier 缓动函数？
cubic-bezier 是 CSS 中使用三次贝塞尔曲线定义的缓动函数，由四个参数 (x1, y1, x2, y2) 组成。P0 固定为 (0,0)，P3 固定为 (1,1)，P1 和 P2 为两个控制点。x1 和 x2 必须在 [0,1] 范围内，y1 和 y2 可以超出此范围以产生"过冲"效果。它控制动画在时间轴上的进度变化速率。
steps() 函数适用于哪些场景？
steps() 缓动函数将动画拆分为离散的步数，适用于：逐帧动画（sprite 动画）、打字机效果、模拟机械表针走动、进度条分段更新等。steps(n, end) 在每个间隔结束时跳变，steps(n, start) 在每个间隔开始时跳变。
y1 或 y2 超出 [0,1] 范围会怎样？
当 y 值超出 [0,1] 时，动画会产生"过冲"或"回弹"效果——元素会暂时超过目标位置再回来，或者先反向移动一段距离。这在设计弹性动画时非常有用。例如 cubic-bezier(0.4, 0, 0.6, 1.5) 会产生轻微的过冲效果。
如何选择合适的缓动函数？
选择缓动函数取决于你想传达的感觉：ease-out（快速开始缓慢结束）适合元素进入屏幕；ease-in（缓慢开始快速结束）适合元素离开；ease-in-out 适合循环动画；steps 适合需要机械感或逐帧效果的场景。使用本工具可以实时预览不同参数的效果。
Linear 与 Ease 的区别是什么？
Linear（线性）表示动画以恒定速率进行，对应 cubic-bezier(0, 0, 1, 1)。Ease 是 CSS 的默认值 cubic-bezier(0.25, 0.1, 0.25, 1)，动画开始时有轻微加速，结束时缓慢减速，更符合自然运动规律。
如何在项目中使用自定义缓动函数？
将本工具生成的 CSS 代码复制到你的样式表中即可。可以应用于：transition: all 0.3s cubic-bezier(...); 或 animation: myAnim 2s cubic-bezier(...) infinite;。也支持 CSS 变量：--my-easing: cubic-bezier(...); 然后在多处引用。
🔧 相关工具