@keyframes 定义闪烁动画时，0% 和 100% 的 opacity 或 filter 必须一致且显式声明，中间帧（如50%）也需明确设置；应避免 opacity: 0、background-color 闪动，优先用 filter: opacity() 提升兼容性与性能；animation 需显式声明 infinite 和 ease-in-out；多动画用逗号分隔；js 控制推荐切换预设类名而非内联样式；调试前务必关闭开发者工具的“禁用动画”开关。
用 @keyframes 定义闪烁动画时，opacity 0% 和 100% 必须明确写死
浏览器对未显式声明的中间状态（比如只写 50%）可能跳过渲染或插值异常，导致闪烁不连贯甚至失效。最稳妥的做法是把起始、中间、结束三帧都写全：
-
0%和100%必须一致（如opacity: 1），否则动画循环会“卡顿” -
50%设为opacity: 0.2或filter: brightness(0.7)，避免完全透明（opacity: 0）引发可访问性问题 - 别用
background-color闪红白——颜色突变易触发重绘，性能差且视觉刺眼
给按钮加 animation 时，别漏掉 infinite 和 ease-in-out
只写 animation: blink 1s 是无效的：默认 animation-iteration-count 是 1，闪一次就停。必须显式声明循环和缓动：
-
animation: blink 1.2s ease-in-out infinite——ease-in-out比linear更自然，避免“机械开关感” - 多个动画叠加（如同时闪 + 渐变移动）要逗号分隔：
animation: blink 1.2s, gradientShift 3s - 如果按钮本身有
:hover缩放，确保transform不被动画覆盖：把transform放在animation后面声明，或用will-change: transform提前提示合成层
移动端 Safari 上 opacity 动画偶尔卡顿？换 filter: opacity()
iOS 16+ 之前，Safari 对 opacity 的硬件加速支持不稳定，尤其在低配设备上。实测更稳的写法是：
- 用
filter: opacity(0.3)替代opacity: 0.3，两者视觉效果一致但合成层更可靠 - 关键帧里统一用
filter：@keyframes blink { 0%, 100% { filter: opacity(1); } 50% { filter: opacity(0.2); } } - 注意：
filter会略微影响文字抗锯齿，若按钮含小字号文本，可加backface-visibility: hidden强制启用 GPU 渲染
想点击才闪？JavaScript 控制类名比内联 style 更可靠
直接用 element.style.animation = "blink 1s" 容易被其他样式覆盖或无法重播。正确做法是预设 CSS 类，用 JS 切换：
- CSS 中定义：
.btn-flash { animation: blink 1s ease-in-out 1; }（注意这里不用infinite） - JS 触发：
button.addEventListener('click', () => { btn.classList.add('btn-flash'); setTimeout(() => btn.classList.remove('btn-flash'), 1000); }); - 监听
animationend事件比setTimeout更精准，尤其动画被用户切页暂停时
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
