不用animation-fill-mode: forwards。因无限循环动画不会结束，forwards无效；关键需用animation-direction: alternate与animation-iteration-count: infinite实现来回闪烁，并配ease-in-out使过渡自然。
click触发后文字颜色循环变色，animation必须用forwards吗？
不用。但如果不设animation-fill-mode: forwards，点击后动画一结束，文字就会立刻跳回原始颜色——这不是“闪烁残留”，而是CSS默认行为。平滑闪烁的关键不是循环本身，而是让最后一次颜色状态能被视觉延续。
- 只靠
@keyframes定义颜色变化不够，必须配合animation-direction: alternate和animation-iteration-count: infinite才能形成来回闪烁 -
animation-fill-mode: forwards在这里其实无效：因为无限循环下根本不会“结束”，forwards没机会生效 - 真正影响闪烁连贯性的，是
animation-timing-function——用ease-in-out比linear更自然，避免生硬跳变
用:active伪类+transition能替代animation实现闪烁吗？
不能。:active只能捕获鼠标按下瞬间，松开就失效，撑不起“持续循环闪烁”。transition只负责两态之间过渡，没有周期控制能力。
-
:active的生效时间通常 - 想靠
transition反复变色，得不断手动触发状态切换（比如用JS切class），不如直接上animation干净 - 例外场景：如果只要“点一下闪一次（非循环）”，用
transition+ JS toggle class更轻量
animation循环闪烁时，如何避免文字抖动或重排版？
颜色变化本身不触发布局，但如果你在@keyframes里误加了transform、padding或font-size，就会引发重绘甚至重排。纯颜色过渡应严格限定在color、background-color、opacity等合成属性上。
- 错误写法：
color: #000; transform: translateX(0);→transform虽不布局，但强制创建新图层，可能在低端设备上掉帧 - 安全写法：只用
color，或搭配opacity（需确保父容器will-change: opacity已优化） - 检查工具：Chrome DevTools 的“Rendering”面板勾选“Paint flashing”，看闪烁时是否意外触发大面积重绘
移动端点击闪烁失效，常见原因是什么？
不是animation问题，是移动端click事件有300ms延迟，导致JS绑定的class切换滞后，视觉上像没反应。纯CSS方案（如:active）也常因touch事件未正确处理而失效。
- 最简解法：给元素加
cursor: pointer+-webkit-tap-highlight-color: transparent，再用animation绑定到:active或JS class上 - 更稳做法：用
touchstart代替click触发class添加，避免300ms等待 - 注意iOS Safari对
animation-play-state的支持较晚（iOS 13+才稳定），老版本建议用animation-name: none临时停用再恢复
animation-duration和timing-function的组合。0.6s配ease-in-out比1s配linear更容易被感知为柔和；太慢像呼吸，太快像故障。这些细节没法靠框架自动调优，得自己对着屏幕点十几次才能定下来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
