ease不能用于循环动画因其首尾减速导致衔接停顿，应改用linear或对称cubic-bezier()；alternate模式需严格对称timing function或改用normal+手动关键帧；禁用transition与animation混用，优先使用transform/opacity触发硬件加速。
animation-timing-function 为什么不能只写 ease？
ease 是默认值，但它在动画首尾都减速，导致重复播放时「回弹感」明显——上一轮结束减速，下一轮开始又减速，中间出现停顿感。真正需要的是首尾速度一致的函数，比如 linear 或自定义贝塞尔曲线。
常见误用：animation-timing-function: ease; 用在旋转、平移类循环动画里，视觉上像卡帧。
-
linear最稳妥：全程匀速，衔接最自然，适合旋转（transform: rotate()）、水平滚动等 - 想保留轻微缓动但不中断？用
cubic-bezier(0.33, 1, 0.67, 0)（即ease-in-out的反向镜像），它让结束速度≈起始速度 - 避免用
ease-in或ease-out：单向变速，重复时必然断层
如何让 animation-direction: alternate 也平滑？
来回播放（alternate）时，即使用了 linear，方向反转点仍可能突兀——因为正向结束帧和反向起始帧状态相同，但速度符号翻转了。关键在「让正向结束速度 = 反向起始速度」。
解决方案是改用 animation-direction: normal + 手动补全反向关键帧，或直接用 cubic-bezier() 构造对称过渡：
立即学习“前端免费学习笔记（深入）”；
- 例如左右移动动画：用
@keyframes slide { 0% { left: 0; } 50% { left: 100px; } 100% { left: 0; } }，配合linear，比alternate更可控 - 若坚持用
alternate，timing function 必须严格对称，推荐cubic-bezier(0.5, 0, 0.5, 1)（即线性）或cubic-bezier(0.42, 0, 0.58, 1)（轻微柔化）
transition 和 animation 的 timing-function 混用会怎样？
别混。CSS transition 作用于属性变化瞬间，而 animation 管控整个周期；如果同时存在（比如 hover 触发动画，又设了 transition: transform 0.3s），浏览器可能叠加插值逻辑，导致节奏错乱甚至跳帧。
- 循环动画一律用
@keyframes+animation，禁用相关属性的transition - 调试时可临时加
animation-play-state: paused，用开发者工具拖动时间轴观察各帧速度是否连续 - 注意：某些硬件加速属性（如
transform、opacity）用linear依然流畅；但left/top等触发重排的属性，再平滑的 timing function 也难掩卡顿
浏览器兼容性与 performance 提示
cubic-bezier() 在所有现代浏览器中支持良好，但 IE10+ 才支持四参数形式；Safari 旧版本对高精度小数（如 0.333333）解析偶有偏差，建议保留两位小数。
真正影响平滑度的往往不是 timing function 本身，而是动画属性是否触发合成层：
- 优先用
transform和opacity，它们走 GPU 合成，timing function 插值更精准 - 避免在循环动画中读写
offsetLeft或触发getComputedStyle，这会强制同步布局，破坏帧率稳定性 - 复杂动画可加
will-change: transform;提前提示，但别滥用——仅对持续动画的元素设置
timing function 再精细，也救不了 layout thrashing。平滑的本质，是让浏览器每一帧都能 predictably commit，而不是靠曲线「骗过眼睛」。
