真正高频且有物理意义的值是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 ≥ 65Firefox ≥ 63Safari 不支持用 requestAnimationFrame 手动驱动关键帧别碰。CSS 动画走的是合成器线程JS 驱动必然掉帧且无法利用硬件加速自定义 cubic-bezier() 参数怎么试才不瞎蒙别在代码里反复改四个小数点试——先用工具可视化再带入。所有靠谱的缓动曲线本质都是“控制加速度变化率”不是调“看起来顺眼”。 NameGPT名称生成器 免费AI公司名称生成器AI在线生成企业名称注册公司名称起名大全。