真正高频且有物理意义的值是ease、ease-in-out、ease-out、cubic-bezier(0.17,0.67,0.83,0.67)和steps()；linear慎用；自定义贝塞尔需结合速度图调参，重在匹配真实加速度变化。
animation-timing-function 哪些值真有用
别被 cubic-bezier() 的四个参数吓住，实际项目里真正高频、有明确物理意义的就那几个。浏览器默认的 ease 其实是 cubic-bezier(0.25, 0.1, 0.25, 1)，它模拟的是轻微过冲的减速——适合按钮点击反馈，但不适合页面入场。
-
ease-in-out：起止都慢，中间快，适合模态框淡入淡出，但容易显得“呆”，因为加速度变化太对称 -
ease-out：常见于下拉菜单收起、tooltip 消失，符合“自然停止”直觉 -
cubic-bezier(0.17, 0.67, 0.83, 0.67)：这个常被叫作“缓入缓出弹性”，比ease-in-out更轻盈，适合卡片悬停浮起 - 慎用
linear：机械感太强，除非你刻意做 UI 警告动效（比如错误提示抖动）
用 steps() 实现逐帧动画时节奏失控怎么办
steps() 不是缓动函数，但它直接影响“节奏感”——尤其做加载骨架屏、打字机效果或 sprite 动画时，卡顿或跳变往往不是帧数问题，而是步长和持续时间没对齐。
- 写法必须是
steps(4, end)这种形式，end表示在每段持续时间**结束时**跳到下一帧；用start容易首帧闪一下 - 假设你有 8 帧雪碧图，想 0.8s 内播完：得写
steps(8)+animation-duration: 0.8s，不能写成steps(4)再配 0.4s——步数必须等于总帧数 - 配合
background-position动画时，确保背景图水平/垂直切分间距一致，否则steps()会跳得不匀
JavaScript 控制 CSS 动画节奏时的隐藏陷阱
用 element.animate() 或改 style.animationTimingFunction 动态调速，看似自由，但真实场景中容易掉进三个坑：
- 直接改
style.animationTimingFunction只影响后续循环，当前正在播放的那一圈节奏不会变——要重置动画得先animationName设为空再设回去 -
element.animate()返回的Animation对象，其effect的updatePlaybackRate()方法只在支持 playbackRate 的浏览器里生效（Chrome ≥ 65，Firefox ≥ 63，Safari 不支持） - 用
requestAnimationFrame手动驱动关键帧？别碰。CSS 动画走的是合成器线程，JS 驱动必然掉帧，且无法利用硬件加速
自定义 cubic-bezier() 参数怎么试才不瞎蒙
别在代码里反复改四个小数点试——先用工具可视化，再带入。所有靠谱的缓动曲线本质都是“控制加速度变化率”，不是调“看起来顺眼”。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 cubic-bezier.com 拖点，重点观察右上角的“velocity graph”：峰值越高，中间越快；左右不对称，说明起始/结束加速度不同
- 想模拟真实物体下落反弹？前半段用
cubic-bezier(0.34, 1.56, 0.64, 1)（快起慢停），后半段接一个更陡的cubic-bezier(0.22, 0.08, 0.38, 0.92)（快停再微弹） - 移动端手指拖拽反馈，建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)：起始响应快，末端跟手不突兀，比系统默认的ease-out更贴合触控物理
真实感不来自“复杂”，而来自加速度是否匹配人脑对物理运动的预期。哪怕只改一个参数，比如把 ease 的第三个值从 0.25 改成 0.1，整个动效的重量感就变了——这点最容易被忽略，也最值得花三分钟调一次。
