合理设置过渡时间和缓动函数可提升hover流畅度。1. 持续时间建议0.2s-0.4s，推荐0.3s；2. 使用ease或ease-in-out等缓动函数增强自然感；3. 明确指定过渡属性如background-color和color，避免使用all；4. 避免触发重排，优先用transform代替宽高变化，并注意低性能设备的动画负载。
列表项在 hover 时过渡不流畅，通常是因为过渡动画的持续时间或缓动函数设置不合理。通过合理使用 transition-duration 和 transition-timing-function（如 ease、ease-in-out 等），可以显著提升视觉流畅度。
1. 设置合适的过渡持续时间
过渡时间太短会显得突兀，太长又会有延迟感。一般按钮或列表项的 hover 效果建议控制在 0.2s 到 0.4s 之间。
- 0.2s：适合快速反馈，如颜色变化
- 0.3s：通用推荐值，平衡响应与流畅
- 0.4s：适合需要更柔和动画的场景
示例：
li {
transition-duration: 0.3s;
}
2. 使用合适的缓动函数提升自然感
CSS 的 transition-timing-function 决定了动画的速度曲线。默认的 ease 多数情况下已经不错，但可以根据需求调整。
立即学习“前端免费学习笔记（深入）”；
- ease：开始快，中间慢，结束快，适合大多数 hover
- ease-in-out：更平滑的进出，适合背景或位移变化
- cubic-bezier(0.25, 0.8, 0.25, 1)：模拟 Material Design 的流畅感
示例：
li {
transition-timing-function: ease-in-out;
}
3. 完整优化写法
将 duration 和 timing-function 结合，并指定具体属性，避免全局 transition 导致性能问题。
li {
transition: background-color 0.3s ease-in-out, color 0.3s ease;
}
li:hover {
background-color: #007acc;
color: white;
}
这样能确保只有目标属性参与过渡，动画更可控、更流畅。
4. 避免常见问题
以下情况可能导致“卡顿”或“不流畅”错觉：
- 使用
transition: all 0.3s—— 过度监听所有属性，容易触发非预期动画 - 动画中触发重排（如改变 width、height）—— 建议优先使用
transform替代 - 在低性能设备上同时运行多个复杂动画 —— 可适当缩短 duration 或降级动画
基本上就这些。合理设置 transition-duration 和缓动函数，再注意属性选择和性能影响，hover 效果就能做到丝滑自然。
