不能只用 opacity 动画，因缺乏 scale 胀缩协同导致视觉“闪烁”而非“呼吸”；需 0%→50%→100% 三段式关键帧，峰值在 50%，首尾一致，配合 ease-in-out、3.2s 周期、±4% 缩放及 will-change 优化。
直接用 @keyframes + animation 实现，但必须同时控制 opacity 和 transform: scale()，只调透明度会像故障闪烁，不是呼吸感。
为什么不能只用 opacity 动画？
纯透明度变化（比如 0.3 → 1 → 0.3）缺乏体积起伏，视觉上是“闪”而不是“呼”。真实呼吸灯有明暗+微胀缩的协同节奏。浏览器对 opacity 和 transform 的硬件加速支持也最成熟，单独改 background-color 或 box-shadow 模糊半径容易触发重绘、掉帧。
- 常见错误：写
animation: breathe 2s infinite;却漏了animation-timing-function，结果默认用ease，起止太急，像抽搐 - 更隐蔽的坑：红点元素本身有
transform: translate(-50%, -50%)居中，但@keyframes里没写初始transform，动画第一帧会跳变 - 移动端低端机易卡顿？加
will-change: transform, opacity;在红点元素上，但别滥用——只对真正需要呼吸的红点加
关键帧必须写成 0%→50%→100% 三段式
两段式（0% → 100%）在循环衔接处有顿挫，因为浏览器插值逻辑无法自然形成“吸-停-呼”的生理节奏。50% 必须是峰值，且 0% 和 100% 的值要完全一致，否则动画循环时会跳帧。
@keyframes badge-breath {
0% {
opacity: 0.4;
transform: scale(0.96);
}
50% {
opacity: 1;
transform: scale(1.04);
}
100% {
opacity: 0.4;
transform: scale(0.96);
}
}
- 周期建议 3.2s：比按钮稍慢（按钮常用 2.4s），突出“未读”的沉静提示感，太快像告警
-
scale()控制在 ±4% 内，人眼对形变更敏感，scale(1.1)就显得弹跳失真 - 别用
alternate——红点不需要反向播放，它本就是单向呼吸再归位；用infinite+forwards确保最后一帧保持住
应用动画时必须显式声明全部必要属性
animation 是复合属性，漏任何一项都可能退化为浏览器默认值。例如没写 animation-duration，就等于 0s，动画根本不播。
.badge-dot {
width: 8px;
height: 8px;
background: #f44336;
border-radius: 50%;
/* 必须和 keyframes 首帧一致 */
opacity: 0.4;
transform: scale(0.96);
animation: badge-breath 3.2s ease-in-out infinite forwards;
}
- 如果红点是绝对定位覆盖在图标右上角，确保父容器有
position: relative，且红点本身加will-change: transform, opacity; - 多个红点同时呼吸？用
animation-delay错峰：animation-delay: calc(var(--i) * 0.3s);配合 CSS 自定义属性，比 JS 随机更轻量 - 无障碍要求？必须加
@media (prefers-reduced-motion: reduce)降级：animation: none;
最容易被忽略的是：红点初始样式（opacity、transform）必须和 @keyframes 的 0% 完全一致，否则第一帧会闪一下——这个“闪”在深色背景或小尺寸红点上特别刺眼，但调试时往往被当成视觉错觉忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
