动画速度曲线属性
最后更新：2026-09-13
animation-timing-function 动画速度曲线属性
animation-timing-function 用于定义动画在运行过程中的速度变化规律，即动画是匀速、先快后慢，还是带有弹跳感。它通过控制中间帧的时间分布，让动画更符合物理直觉或设计风格，是提升动效质感的关键属性。
| 分类 | |
|---|---|
| 初始值 | ease |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>);⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps() | cubic-bezier() | 关键字 | 动画速度曲线 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation-timing-function | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| 所有主流浏览器均支持 | |||||
提示： cubic-bezier() 允许自定义任意贝塞尔曲线，常用工具如 cubic-bezier.com 可以可视化调节；steps() 则用于实现逐帧动画（如精灵图动画）。
提示： ease 是默认值，表现为「慢-快-慢」；linear 匀速适合持续旋转；ease-out 常用于元素进入画面，ease-in 常用于元素离开画面。
❓ 常见问题
Qtransition-timing-function 和 animation-timing-function 一样吗？
A取值完全一样，都支持 ease、linear、cubic-bezier()、steps() 等，但作用对象不同：前者作用于 transition 过渡，后者作用于 animation 动画。两者都控制「时间与进度」的关系，而不是距离与速度的关系，因此同一个 cubic-bezier 值在两处效果一致。
Q如何实现「弹性」效果？
A使用 cubic-bezier() 并让曲线的 y 值超出 0~1 区间，例如 cubic-bezier(0.68, -0.55, 0.27, 1.55)。曲线超出范围意味着动画过程中元素会先越过目标值再回弹，产生富有弹性的手感。这类「过冲」曲线很适合按钮弹跳、弹窗入场等活泼交互。
Qsteps() 逐帧动画怎么写？适合什么场景？
Asteps(n) 把动画平均切成 n 段，段间直接跳变而非连续插值，配合精灵图可实现逐帧动画，每帧时长 = duration / n。jump-start 保留第一帧、jump-end 保留最后一帧，step-start/step-end 是简化写法。
Qease、ease-in、ease-out、linear 有什么区别？什么时候用哪个？
Aease（默认）先快后慢，通用性好；ease-in 先慢后快，适合元素离开画面；ease-out 先快后慢，适合元素进入画面，如弹窗、卡片滑入；ease-in-out 两端都慢，适合循环动画如呼吸灯。linear 全程匀速，适合旋转、进度条等不希望变速的效果。
🏷️ 相关属性
💡 相关案例
📚 相关教程
