必须用 animation。呼吸效果需周期性自主循环，transition 仅响应状态变化；应使用 @keyframes 定义 opacity 与 scale 的自然起伏（如 0.7↔1、0.95↔1），首尾值一致以避免突变，并通过 class 控制启停以兼顾性能与体验。
呼吸动画用 animation 还是 transition？
必须用 animation。呼吸效果是周期性、自动反复的缩放+透明度变化，transition 只响应状态切换（比如 hover），无法自主循环。用 @keyframes 定义 0% → 100% 的渐变过程，再通过 animation-iteration-count: infinite 实现持续呼吸。
keyframes 中 opacity 和 transform 怎么配比？
呼吸感的关键不是“越放大越好”，而是轻微、自然的起伏。常见错误是 scale 设到 1.3 或更高，反而像弹跳；opacity 从 0.6 → 1.0 比 0 → 1 更柔和，避免闪烁感。建议这样写：
@keyframes breathe {
0% {
opacity: 0.7;
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0.7;
transform: scale(0.95);
}
}
注意：不要在 0% 和 100% 写完全不同的值（比如 0% scale(1)、100% scale(0.9)），否则动画结束时会突变——CSS 动画默认不自动平滑衔接首尾，必须显式保持一致。
按钮上加呼吸动效要注意哪些兼容和性能点？
现代浏览器都支持 transform + opacity 的硬件加速，但仍有几个实际坑：
立即学习“前端免费学习笔记（深入）”；
- 别给
body或大容器加呼吸动画，重绘区域越大，掉帧越明显；只作用于按钮自身 - 安卓 WebView 旧版本（如 Android 4.4）可能不支持
transform: scale()在 inline 元素上的动画，确保按钮是display: inline-block或block - 如果按钮有
box-shadow，呼吸过程中阴影会随缩放变化，显得更“浮”；若要稳重些，可固定box-shadow的偏移和模糊值，或改用filter: drop-shadow() - 动画时长设在 2.5s–4s 之间最接近生理呼吸节奏；太快像心跳，太慢失去提示感
怎么让呼吸只在特定状态触发（比如仅未读时）？
直接靠 class 控制最可靠，而不是用 JS 频繁 toggle 动画属性。定义一个 .has-unread 类，把动画规则写死在里面：
.notify-btn.has-unread {
animation: breathe 3s ease-in-out infinite;
}
这样 JS 只需管理 class 存在与否：btn.classList.toggle('has-unread', hasUnread)。避免直接操作 style.animation，否则容易和 CSS 规则冲突，且难以维护。
真正难的是让呼吸“不打扰”：比如用户正在输入，或焦点在表单里，这时该暂停动画。可以监听 blur / focusin 临时移除 class，但别忘了恢复——这个细节常被忽略。
