CSS 动画缓动函数指南

查询 CSS 动画与过渡的缓动关键字(linear、ease、ease-in、ease-out、ease-in-out、steps)对应的贝塞尔曲线与使用要点;也可以输入四个数值生成自定义的 cubic-bezier()。全部在浏览器本地完成。

缓动查询与生成 等待输入

输入关键字查询;或填写四个数值后点击生成 cubic-bezier()。

计算结果
收录条目—
当前结果—
输入缓动关键字或四个数值后点击执行,结果将显示在这里。

贝塞尔曲线控制点需在 x∈[0,1] 范围内;结果仅供参考。

计算说明
  • 缓动函数描述动画在时间上的速度变化。
  • linear 匀速;ease 为默认值,先快后慢。
  • ease-in 慢入、ease-out 慢出、ease-in-out 两端慢。
  • cubic-bezier(x1, y1, x2, y2) 的两个 x 必须位于 0~1。
  • steps(n, ...) 用于分步动画(如逐帧)。