直接加 animation 到 .badge 会失效，因 bootstrap 5+ 默认 display: inline-flex 和 vertical-align: baseline，且父容器 overflow: hidden 或层级问题易导致裁剪；需用独立 class（如 badge-blink）覆盖，默认不启用，js 动态添加并控制时长，兼顾可访问性与兼容性。
为什么直接加 animation 到 .badge 会失效？
Bootstrap 5+ 的 .badge 默认带 display: inline-flex 和 vertical-align: baseline，而多数闪烁动画依赖 opacity 或 transform 变化——但若父容器有 overflow: hidden（比如某些导航栏、按钮内嵌 badge），或 badge 被包裹在 position: relative 且未设 z-index 的元素里，动画可能被裁剪或层级压住。更常见的是，Bootstrap 的 CSS 优先级高，你写的 @keyframes 没生效，是因为没覆盖其默认样式。
怎么写一个真正生效的闪烁动画类？
别改 Bootstrap 原生 CSS，用独立 class 覆盖。关键点：动画必须作用于 badge 元素本身，且确保 animation-fill-mode: forwards 不干扰交互状态（比如 hover 时暂停）。
- 定义
@keyframes blink，用opacity而非visibility（后者会触发重排） - 给 badge 添加新 class，如
badge-blink，并显式设置animation: blink 1.5s infinite - 必须重置
animation-timing-function为steps(1, end)或线性，避免渐变过渡看起来“慢半拍” - 如果 badge 在
button内，需额外加button .badge-blink { position: relative; z-index: 1; }防止被遮挡
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.badge-blink {
animation: blink 1.2s infinite;
animation-timing-function: linear;
}
如何让闪烁只在有新消息时触发，而不是一直动？
硬编码 animation 会导致 badge 永远闪烁，影响可访问性和用户耐心。正确做法是用 JS 控制 class 开关，并配合一次性的动画重播机制。
- 初始状态不加
badge-blink，只在数据更新后动态添加 - 用
element.classList.add('badge-blink')后，监听animationend事件，在第三次闪烁后自动移除（避免无限循环） - 更稳妥的做法：用
setTimeout控制总时长，比如只闪 3 秒，然后classList.remove('badge-blink') - 注意：若用户切换标签页，
requestAnimationFrame会暂停，但 CSS animation 仍计时，所以用setTimeout更可靠
移动端 Safari 和旧版 Edge 的兼容性坑
iOS 15.4 之前 Safari 对 animation 在 inline-flex 元素上支持不稳定，尤其当 badge 含图标（如 <i class="bi bi-bell"></i>）时，整个动画可能卡顿或跳帧。
- 临时方案：对
.badge-blink强制开启硬件加速，加transform: translateZ(0) - Edge 18 及更早版本不支持
animation在伪元素上生效，所以别试图用::after实现闪烁，老老实实作用于 badge 本体 - 如果项目需支持 IE11，放弃 CSS animation，改用 JS +
setInterval切换opacity，并手动清理 timer
prefers-reduced-motion: reduce 下禁用动画——加一句 @media (prefers-reduced-motion: reduce) { .badge-blink { animation: none; } } 就能避开合规风险。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
