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

CSS 缓动函数可视化预览 - 动画 timing-function 演示

动画 开发工具 CSS 动画 缓动 预览
7
0
0
0
主演示 ease
速度: 0.5× 1× 2× 3×
贝塞尔曲线 拖拽控制点调整
多函数对比 点击轨道加载到编辑器
x1
y1
x2
y2
CSS 代码
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
常见问题
什么是 CSS 缓动函数（timing-function）？
CSS 缓动函数用于控制动画在时间轴上的变化速率。它定义了动画在每个时间点的进度，让动画可以加速、减速或弹跳，而非匀速运动。常见的缓动函数包括 ease、linear、ease-in、ease-out、ease-in-out 以及自定义 cubic-bezier() 函数。
cubic-bezier() 的四个参数分别代表什么？
cubic-bezier(x1, y1, x2, y2) 定义了一条三次贝塞尔曲线。起点固定为 (0, 0)，终点固定为 (1, 1)。x1, y1 是第一个控制点，x2, y2 是第二个控制点。x 值必须在 [0, 1] 范围内，代表时间进度；y 值可以超出 [0, 1]，从而创建弹跳或过冲效果。例如 cubic-bezier(0.68, -0.55, 0.27, 1.55) 会产生弹性缓出效果。
ease 和 ease-in-out 有什么区别？
ease（默认值）等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，动画开始时加速较快，结束时缓慢减速，整体感觉自然流畅。ease-in-out 等价于 cubic-bezier(0.42, 0, 0.58, 1)，动画在开头和结尾都有缓动，中间匀速，适合循环动画或需要对称缓动的场景。ease-in-out 的加速和减速更加对称。
如何创建弹跳或弹性动画效果？
通过让 cubic-bezier 的 y 值超出 [0, 1] 范围即可创建弹跳效果。当 y 值大于 1 时，动画会"冲过头"再回弹；当 y 值小于 0 时，动画会先反向移动再前进。经典弹性缓出：cubic-bezier(0.68, -0.55, 0.27, 1.55)；弹性缓入：cubic-bezier(0.32, 1.55, 0.73, -0.55)。在上方编辑器中拖拽控制点即可直观调整。
如何在前端项目中应用自定义缓动函数？
在 CSS 中直接使用：animation-timing-function: cubic-bezier(x1, y1, x2, y2); 或 transition-timing-function: cubic-bezier(...);。在 JavaScript Web Animations API 中：element.animate(keyframes, { easing: 'cubic-bezier(x1, y1, x2, y2)' })。也可用于 JS 动画库如 GSAP、Framer Motion 等。本工具生成的代码可直接复制使用。
CSS 中 steps() 和 cubic-bezier() 有什么区别？
cubic-bezier() 提供平滑连续的缓动曲线，适合绝大多数过渡和动画场景。steps(n, direction) 则将动画切分为 n 个离散步骤，逐帧跳变，适合精灵动画、打字机效果等需要"阶梯感"的场景。两者都属于 CSS <easing-function> 数据类型，可互相替代使用。
🔧 相关工具