animation-timing-function支持ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier()、steps()等值，用于定义动画速度曲线，不控制时长或次数。
animation-timing-function 支持哪些值
这个属性控制动画“怎么动”，不是“动多久”或“动几次”。它只接受明确的函数类型，不能写数字、百分比或自定义单位。
常见可用值包括：ease（默认）、linear、ease-in、ease-out、ease-in-out、cubic-bezier(0.25, 0.1, 0.25, 1)、steps(4, start)。注意：initial 和 inherit 也能用，但实际项目中极少需要。
容易踩的坑：
-
ease-in-out不等于ease—— 前者首尾都缓，后者是“慢-快-慢”，中间段更快； -
cubic-bezier()四个参数必须都在 0–1 范围内，超出会直接失效（浏览器忽略该声明）； -
steps()的第一个参数必须是正整数，写steps(2.5)或steps(-1)无效。
在 animation 简写里怎么写 timing-function
简写语法中，animation 的参数顺序固定：animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction>;
立即学习“前端免费学习笔记（深入）”；
例如：
div {
animation: slideIn 0.6s ease-in 0.2s infinite alternate;
}
这里 ease-in 就是 animation-timing-function 的值。如果省略它，浏览器自动补上 ease。
关键点：
- 不能把
timing-function放在duration前面，否则整个声明会被忽略； - 如果用了
cubic-bezier()或steps()，确保括号完整、逗号清晰，比如steps(3, end)不能写成steps(3 end)； - 多个动画叠加时，每个动画需单独指定 timing-function，不能共用一个。
为什么改了 animation-timing-function 没效果
最常见原因不是写错了值，而是动画根本没跑起来。
检查以下几点：
-
animation-duration必须大于0s（比如0.001s可以，0s不行），否则 timing-function 完全不生效； -
animation-name对应的@keyframes必须存在且拼写一致（大小写敏感）； - 若用 JavaScript 动态设置，要确认是修改了
style.animationTimingFunction，而不是style.animation字符串（后者会覆盖整个简写，可能意外丢掉 timing-function）； - 某些旧版 Firefox 曾经只支持
animationTimingFunction（驼峰写法）的 JS 属性访问，但现在所有主流浏览器都支持标准小写连字符形式animation-timing-function的 CSS 设置和style.animationTimingFunction的 JS 访问。
steps() 和 cubic-bezier() 怎么选
steps() 适合做逐帧式效果，比如数字翻牌、加载指示器的“打字机”跳变、精灵图切换；cubic-bezier() 更适合模拟物理运动或精细调速，比如弹跳、回弹、慢启动加速等。
实操建议：
- 要做“一格一格”跳变，用
steps(6, end)表示分 6 步、每步在时间结束时生效； - 想模仿弹簧效果，试试
cubic-bezier(0.68, -0.55, 0.27, 1.55)（注意：y 值可超 [0,1]，这是允许的，叫“超调贝塞尔”）； - 调试
cubic-bezier()时，打开 Chrome DevTools → Elements → Styles → 点击 timing-function 值旁边的图标，能可视化拖拽曲线； - 不要在复杂动画里滥用
steps()配合高帧率，它本质是离散变化，跟流畅感无关，别误当“高性能替代方案”。
真正容易被忽略的是：timing-function 只影响“插值过程”，它不改变关键帧定义的内容，也不影响动画是否触发、是否循环。哪怕写成 linear，如果 @keyframes 里两个状态完全一样，依然看不到变化。
