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

CSS缓动函数生成器 - Cubic-Bezier曲线编辑

前端设计 生成器 CSS Cubic-Bezier 缓动
82
0
0
0
第一步：打开CSS缓动函数生成器页面，您将看到一个带有贝塞尔曲线的坐标系编辑区域和旁边的动画预览区域。坐标系的横轴代表时间进度（从0%到100%），纵轴代表动画进度（从0%到100%）。P0(0,0)是动画起点，P3(1,1)是动画终点，这两个点是固定的不可移动。第二步：使用鼠标拖拽曲线上的两个可移动控制点P1和P2（通常显示为圆形标记），将它们移动到您想要的位置。随着控制点的移动，贝塞尔曲线的形状会实时变化，同时下方的cubic-bezier()数值也会同步更新。您可以先选择一个预设作为起点，再微调控制点获得更精确的效果。第三步：调整控制点时，注意观察右侧动画预览区域的变化。您可以点击预览动画的播放按钮，反复观看不同缓动参数下的动画效果，找到最满意的缓动曲线。建议同时观察多种预览类型（如位移、缩放、透明度变化），确保曲线在不同动画类型下都表现良好。第四步：如果您想使用某个常用的缓动预设，可以点击预设列表中的选项，曲线会自动跳转到对应的位置，您可以在此基础上继续微调。常用的预设包括ease-in-out（适合页面切换动画）、ease-out（适合元素入场动画）和ease-in（适合元素离场动画）。第五步：当曲线调整到满意状态后，查看并复制下方生成的cubic-bezier()函数值，将其粘贴到您的CSS代码中。例如：transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);。建议同时设置合适的transition-duration，缓动曲线的效果需要配合适当的持续时间才能达到最佳表现。第六步：对于需要精确数值的高级用户，可以直接在数值输入框中键入具体的x1、y1、x2、y2值，系统会自动将x值限制在0到1的范围内（y值则允许超出此范围以实现弹跳效果），并实时更新曲线。您可以从其他优秀项目中学习和参考它们使用的缓动参数，通过本工具快速验证效果。
🔧 相关工具