闪烁动画应使用@keyframes定义0%/100% opacity:1与50% opacity:0的循环关键帧，配animation:blink 1s step-end infinite实现开关式效果；ie需js切换transition class；须规避光敏风险、提供禁用开关及prefers-reduced-motion支持。
闪烁动画用 @keyframes 配合 opacity 最直接
浏览器原生支持，不需要 JS，也不依赖第三方库。核心就是定义一个从 0 到 1 再回 0 的透明度变化，并用 animation 持续播放。
常见错误是只写 opacity: 0 → 1，结果看起来是“淡入后停住”，不是“闪烁”。必须让关键帧回到起点（比如第 0% 和 100% 都设为 opacity: 1，中间插一个 50% 设为 opacity: 0），才能形成循环视觉节奏。
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }- 应用时加
animation: blink 1s step-end infinite;（step-end可避免过渡渐变，更接近“开关式”闪烁） - 注意：别用
ease或默认缓动，否则会模糊闪烁边界，失去提示感
IE 不支持 animation？用 transition + 定时器模拟也行
老项目还要兼容 IE10/11，@keyframes 无效，就得换思路：靠 JS 控制 class 切换，配合 transition 实现 opacity 变化。
性能上比纯 CSS 动画略低，但兼容性稳。关键是 class 切换时机要准，否则容易卡顿或漏帧。
- 先写好两个 class：
.blink-on { opacity: 1; transition: opacity .2s; }和.blink-off { opacity: 0; transition: opacity .2s; } - JS 用
setInterval切换这两个 class，间隔建议 ≥ 300ms，太短人眼难识别，还可能触发浏览器节流 - 别用
requestAnimationFrame做闪烁主控——它不保证固定周期，容易飘
闪烁太多会干扰用户，得加控制开关和可访问性兜底
WCAG 明确警告：高频闪烁（尤其是 2–55Hz）可能诱发光敏性癫痫。浏览器不会自动拦截，全靠开发者判断。
实际项目里，“需要闪烁”的场景其实很有限：表单校验失败、未读消息红点、连接断开提示。其他地方加闪烁，大概率是设计冗余。
- 务必提供关闭入口，比如设置项里加「禁用动画」开关，存到
localStorage并动态移除animation样式 - 监听系统偏好：
@media (prefers-reduced-motion: reduce)下直接关掉所有animation - 别用纯色块高频闪，至少搭配图标或文字，确保信息可被非视觉方式获取（比如用
aria-live同步状态）
animation-play-state: paused 能临时冻结，但别滥用在交互反馈里
有人想“鼠标悬停就暂停闪烁”，用 :hover 改 animation-play-state。逻辑没错，但体验常出问题：暂停时机不可控，用户移入移出抖动，反而更干扰。
真正需要暂停的，通常是全局状态变更，比如页面失焦、用户开启专注模式、或后台任务运行中。
- 用 JS 控制更可靠：
el.style.animationPlayState = 'paused'，配合 visibility / display 切换更稳妥 - 别在
:focus或:active里写animation-play-state——焦点切换快，样式来不及响应 - 暂停后记得恢复：监听
visibilitychange事件比监听blur更准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
