CSS贝塞尔曲线编辑器

功能说明

cubic-bezier缓动曲线是CSS transition/animation的核心节奏控制器，定义动画在时间线上的加速/减速曲线。

功能特点：可视化拖拽控制点、实时预览曲线形态、动画效果演示、内置常用预设（linear/ease/Material 3/spring等）、一键复制代码。

适用于按钮hover反馈、模态框出场入场、列表项滚动入场、页面切换动画等场景。

使用步骤

1. 拖拽曲线上的两个控制点（P1、P2）调整曲线形态。

2. 点击预设按钮快速应用常用曲线。

3. 点击"播放"预览动画效果。

4. 复制 timing-function 或完整 transition 代码到项目中。

常见问题

cubic-bezier的4个数字是什么？

cubic-bezier(x1, y1, x2, y2)中(x1,y1)是从起点(0,0)拉出的控制点，(x2,y2)是从终点(1,1)拉回的控制点。X必须在[0,1]内，Y可以超出范围实现spring效果。

什么时候用ease-in/ease-out？

进场用ease-out（减速到位），退场用ease-in（加速离开），双向动画用ease-in-out。

你可能还想问

cubic-bezier 四个参数怎么理解？

对应两个控制点的横纵坐标；横轴是时间进度（须在 0-1 之间），纵轴是动画完成度（可超出 0-1 实现回弹）。拖动控制点即可直观看到缓动效果。

常用缓动的近似值有哪些？

标准缓入缓出约 (0.42, 0, 0.58, 1)，快出慢入约 (0.25, 0.1, 0.25, 1)；弹跳感可用超过 1 的纵坐标值，比叠加关键帧更省代码。

调好的曲线在项目里怎么用？

复制 transition-timing-function 或 animation-timing-function 的值直接使用；建议抽成 CSS 变量统一管理，全站动效风格才一致。

相关工具

相关内容