使用animation替代hover中的opacity过渡可避免闪烁卡顿，因transition在频繁触发时易出现渲染异常，而keyframes能更精准控制动画流程，结合will-change优化和避免混合使用transition可提升动画稳定性。
在使用 :hover 状态配合透明度（opacity）实现鼠标悬停动画时，有时会出现闪烁、卡顿或重复触发的问题。这通常是因为浏览器对 transition 和 opacity 的渲染机制不够稳定，尤其是在复杂布局或频繁交互中。通过改用 @keyframes 配合 animation 可以更精准地控制动画过程，避免异常。
为什么 hover 中 opacity 过渡会异常？
部分浏览器在处理 hover 状态切换时，若元素布局受透明度变化影响（如重绘区域计算错误），可能导致视觉闪烁。另外，transition 在反复快速进出时容易产生“抖动”或未完成就反向执行的问题。使用 keyframes 动画替代 transition
将原本依赖 transition 的透明度变化改为由 @keyframes 定义的动画，能更好控制起止状态和执行流程：- 定义一个名为 fadeHover 的关键帧动画，从 opacity: 1 到 opacity: 0.5
- 在 :hover 中应用该动画，并设置 forwards 保持最终状态
- 移除 transition 属性，避免与 animation 冲突
优化建议与注意事项
为确保动画流畅且无异常，请注意以下几点：- 使用 will-change: opacity 提示浏览器提前优化图层
- 避免同时对多个属性使用 transition 和 animation 混合控制
- 如需反向动画（离开时淡回），可为原始状态也设置对应动画或结合 JavaScript 控制类名
- 测试不同设备和浏览器下的表现，特别是移动端 Safari
基本上就这些。用 animation 替代 hover 下的 opacity transition 能有效减少渲染异常，提升用户体验。关键是合理定义 keyframes 并避免样式冲突。
