css动画如何控制动画的加速与减速_利用animation-timing-function控制速度曲线

animation-timing-function支持5个预设关键词：ease、linear、ease-in、ease-out、ease-in-out；不识别fast、slow等无效词；需用cubic-bezier()实现复杂节奏，steps()不可与关键词混用。

animation-timing-function 支持哪些预设关键词

animation-timing-function 用来定义动画在持续时间内的速度变化规律，不是控制“快慢”，而是控制“怎么快、怎么慢”。它接受的关键词只有 5 个：ease、linear、ease-in、ease-out、ease-in-out。浏览器不识别 fast、slow、accelerate 这类词，写了也无效。

常见误用是把 ease-in 当作“只加速”，其实它从 0% 开始缓慢启动，到 100% 时速度最快；ease-out 则相反——开头快、结尾急停。真正“先快后慢再快”的节奏无法靠关键词实现，得用贝塞尔曲线。

如何用 cubic-bezier() 精确控制加减速过程

cubic-bezier(x1, y1, x2, y2) 是最常用的自定义方式，四个参数代表贝塞尔曲线两个控制点的坐标。x 值必须在 [0, 1] 区间，y 值可以超出（比如负值或大于 1），从而实现“回弹”或“过冲”效果。

• cubic-bezier(0.4, 0, 0.2, 1) 是标准的“缓入缓出”，比 ease 更平滑，Material Design 推荐用这个
• cubic-bezier(0.33, 1, 0.68, -0.55) 开头慢→中途快→结尾回弹，适合强调型动效
• cubic-bezier(0.1, 0.8, 0.2, 1) 强缓入，适合淡入类动画，避免生硬突显

调试建议：用 chrome DevTools 的动画检查器（Elements → Styles → 点击动画属性旁的小齿轮图标），直接拖动控制点实时预览曲线变化。

立即学习“前端免费学习笔记（深入）”；

steps() 函数和 timing-function 混用会怎样

steps() 不是速度曲线，而是帧数分割函数，常用于精灵图动画或数字跳变。它和 cubic-bezier() 或 ease 互斥——同一个 animation-timing-function 值里不能同时写 steps(4) 和 ease-in，否则整条声明会被浏览器忽略。

典型错误写法：animation-timing-function: steps(3) ease-in; → 无效

正确做法：animation-timing-function: steps(3, end); 或单独用 cubic-bezier()，不要混搭。

transition 和 animation 共用 timing-function 时要注意什么

两者都支持 animation-timing-function（transition 中叫 transition-timing-function），但行为有差异：

• transition 的 timing-function 只作用于单次状态切换，不可重复
• animation 的 timing-function 作用于每一圈循环，包括 animation-iteration-count: infinite 时的每一次重放
• 如果同时给元素设了 transition 和 animation，且都影响同一属性（如 transform），animation 会覆盖 transition，timing-function 以 animation 的为准

容易被忽略的是：当动画用 animation-fill-mode: forwards 停留在终点，之后触发 transition，timing-function 重新生效——这种“交接时刻”的速度突变，往往就是动效不连贯的根源。