使用@keyframes定义blink动画，0%和100%设opacity:1、50%设opacity:0.2，配合animation:blink 1s infinite linear实现自然匀速闪烁；避免opacity直跳、慎用非linear缓动；注意js覆盖、硬件加速干扰及旧版webkit兼容性问题。
用 @keyframes 控制 opacity 实现闪烁
直接写一个从 0 到 1 循环变化的动画即可，关键在关键帧定义和动画参数配合。不要只设 opacity: 0 → opacity: 1，那样会显得“硬切”，建议加一点中间态让过渡更自然。
实操建议：
- 定义
@keyframes blink，比如0% { opacity: 1; }、50% { opacity: 0.2; }、100% { opacity: 1; } - 应用时用
animation: blink 1s infinite;，其中1s是单次周期时长，infinite表示无限循环 - 避免用
opacity: 0→opacity: 1直跳，人眼容易感知卡顿；0.2这类中间值能缓解视觉突兀感
animation-timing-function 对闪烁节奏的影响
默认 ease 会让闪烁开头慢、中间快、结尾又慢，实际效果是“忽明忽暗不均匀”。多数场景下更适合用 linear 或 steps(2, jump-end)。
实操建议：
- 要匀速明暗交替：加
animation-timing-function: linear; - 要模拟老式显示器那种“一格一格”闪（比如告警提示）：用
steps(2, jump-end)，配合opacity在两个值间跳变 - 慎用
cubic-bezier(.5, 0, .5, 1)类自定义缓动——它可能让闪烁在某一段停留过久，反而削弱提示效果
闪烁动画被其他样式或 JS 中断的常见原因
最常遇到的是：元素突然停止闪烁，或只闪一次就停。往往不是动画写错了，而是被覆盖、重置或触发了重排。
实操建议：
- 检查是否被
!important的内联样式或高权重 CSS 覆盖了animation属性 - JS 动态设置
element.style.opacity = '1'会直接覆盖animation对opacity的控制，改用element.style.animationPlayState = 'paused'更安全 - 父元素设置了
will-change: transform或开启了硬件加速，有时会干扰 opacity 动画渲染，可临时移除验证
移动端 Safari 和旧版 Android WebView 的兼容性坑
iOS 15.4 之前、Android 4.4–6.x 的 WebKit 内核对 opacity 动画有渲染延迟或掉帧问题，尤其在低功耗模式下。
实操建议：
- 给闪烁元素加
transform: translateZ(0)或backface-visibility: hidden，强制启用 GPU 加速 - 避免同时对多个元素启用相同闪烁动画——iOS 上容易不同步，建议错开
animation-delay - 如果只是用于状态提示（如“正在加载”），优先考虑用
border-color或box-shadow动画替代，它们在旧引擎中更稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
