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 重新生效——这种“交接时刻”的速度突变，往往就是动效不连贯的根源。
