CSS工具/缓动函数编辑器
缓动函数编辑器
设计自定义三次贝塞尔缓动函数，实现流畅动画
曲线编辑器
拖动控制点调整曲线
控制
1s
动画预览
预设
CSS代码
Loading...CSS Easing Function Guide
Learn how to create smooth and natural animations
What is Easing?
Easing functions specify the rate of change of an animation over time. The cubic-bezier function defines a curve with four control points, allowing you to create custom acceleration and deceleration patterns. This makes animations feel more natural and engaging than linear motion.
How to Use This Tool
- Drag the control points on the curve to adjust the easing
- Use preset buttons for common easing functions
- Preview the animation to see the effect in action
- Copy the cubic-bezier value to use in your CSS
Pro Tips
- Use ease-out for entering animations and ease-in for exiting
- Values outside 0-1 on the Y axis create overshoot effects
- Linear easing works best for opacity and color transitions
Browser Support
The cubic-bezier() function is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's part of the CSS transitions and animations specifications with excellent compatibility.
常见问题
cubic-bezier的四个值分别代表什么？
cubic-bezier(x1, y1, x2, y2)中，x1、y1是第一个控制点，x2、y2是第二个控制点。x值必须在0~1之间（表示时间），y值可以超出范围（产生过冲效果）。起点(0,0)和终点(1,1)是固定的。
ease、ease-in、ease-out有什么区别？
ease的开始和结束较慢，中间较快。ease-in从慢开始逐渐加速。ease-out从快开始逐渐减速。ease-in-out的开始和结束都较慢。UI动画通常使用ease-out。
如何创建过冲（弹性）效果？
使用y值小于0或大于1的cubic-bezier。例如：cubic-bezier(0.68, -0.55, 0.27, 1.55)会在开始和结束时稍微超过目标然后返回，产生弹性效果。这种效果可以为按钮点击或模态框出现增添活力。
什么时候使用steps()函数？
steps()函数创建阶梯式而非连续的动画。适用于精灵动画、打字机效果、时钟秒针等不连续运动。steps(5)将动画分成5个阶段执行。
应该选择哪种缓动函数？
元素出现时使用ease-out（快速出现，缓慢稳定），消失时使用ease-in（缓慢开始，快速消失）。移动动画使用ease-in-out更自然。背景色或透明度变化使用linear更合适。