CSS动画不平滑主因是时长和节奏控制不当，合理设置animation-duration（建议200ms~500ms）和animation-timing-function（如ease-out、cubic-bezier），结合transform位移与will-change提升性能，可实现流畅动画。
CSS元素移动动画不平滑，通常不是因为属性写错了，而是动画的节奏和时长控制不当。想要让动画看起来自然流畅，关键在于合理设置 animation-duration 和 animation-timing-function。这两个属性共同决定了动画的“感觉”。
调整 animation-duration 控制动画时长
动画持续时间太短会显得突兀，太长又让人感觉迟钝。合适的 duration 能让视觉过渡更舒适。
建议：- 一般情况下，200ms 到 500ms 是比较自然的动画时长
- 轻微位移（如按钮悬停）可用 200ms~300ms
- 较大范围移动（如菜单滑出）可设为 400ms~600ms
- 避免使用低于 100ms 或高于 1s 的时长，除非有特殊交互需求
使用 animation-timing-function 调整动画节奏
默认的 timing function 是 ease，但并不总是最合适的。不同的缓动函数能让动画从“机械”变“自然”。
常用选项：- ease-out：开始快，结束慢，适合元素移出视线
- ease-in：开始慢，加速前进，适合元素进入视野
- ease-in-out：两端慢，中间快，适合来回切换的动画
- cubic-bezier(0.4, 0, 0.2, 1)：类似 Material Design 的流畅弹性效果
结合 transform 和 will-change 提升性能
即使 timing 设置得当，如果动画触发重排或重绘，依然会卡顿。应优先使用 transform 实现位移。
立即学习“前端免费学习笔记（深入）”；
示例：
.element {
animation: slideRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform; /* 提前告知浏览器该元素将动画 */
}
@keyframes slideRight {
to {
transform: translateX(100px);
}
}
使用 transform 可避免布局重计算，而 will-change 能帮助浏览器提前优化图层。
基本上就这些。只要 duration 合理、timing 函数贴合场景，并用 transform 驱动位移，大多数移动动画都能变得顺滑自然。
