CSS实现按钮呼吸灯效果最稳妥，需用@keyframes协同控制opacity（0.4→1.0→0.4）与transform:scale（0.95→1.05→0.95），时长设2.5s~3.5s，ease-in-out缓动，hover时用animation-play-state:paused暂停并保持状态。
用 CSS animation 实现按钮呼吸灯效果最稳妥
纯 HTML 无法实现呼吸灯，必须靠 CSS 动画驱动。核心是用 @keyframes 定义透明度与缩放的周期性变化，再绑定到按钮的 animation 属性上。JavaScript 不是必需项，加了反而容易引入时序 bug 或重绘抖动。
常见错误是只调 opacity，结果按钮“隐身”却不“呼吸”——真正呼吸感来自 opacity + transform: scale() 的协同变化：
-
opacity控制明暗节奏（0.4 → 1.0 → 0.4） -
scale(0.95)模拟收缩，scale(1.05)模拟膨胀，增强视觉脉动感 - 动画时长建议设为
2.5s ~ 3.5s，太短像闪烁，太长失去呼吸感
:hover 状态下要不要暂停呼吸？得看交互逻辑
用户悬停时继续呼吸，会分散注意力；直接停掉，又显得生硬。更合理的做法是：悬停时暂停动画，但保留当前状态（不跳回初始值），鼠标移开后从暂停处继续。
实现靠 animation-play-state：
立即学习“前端免费学习笔记（深入）”；
button {
animation: breathe 3s ease-in-out infinite;
}
button:hover {
animation-play-state: paused;
}
注意：不要用 display: none 或 visibility: hidden 控制暂停，那会强制重置动画状态；也不要写成 animation: none，它会彻底取消动画，移开后不会恢复。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
IE11 兼容不了 @keyframes？那就用 transition 模拟简易版
IE11 支持 transition 但不支持 animation 的无限循环。如果必须兼容，可改用 JS 驱动单次过渡 + 定时器循环：
const btn = document.querySelector('button');
let isGrowing = true;
function pulse() {
if (isGrowing) {
btn.style.opacity = '1';
btn.style.transform = 'scale(1.05)';
} else {
btn.style.opacity = '0.4';
btn.style.transform = 'scale(0.95)';
}
isGrowing = !isGrowing;
}
setInterval(pulse, 1500);
但要注意：setInterval 在页面非活跃标签页中可能被节流，导致呼吸节奏变慢甚至卡住；CSS 方案在所有现代浏览器中更可靠、性能更好。
为什么加了 will-change: transform 后闪动更顺？
呼吸动画频繁触发 transform 和 opacity，浏览器默认把这类元素放在普通图层渲染，容易掉帧。加上 will-change: transform 是给浏览器一个明确提示：“这个元素要动”，促使它提前升格为独立合成图层。
实操建议：
- 只对需要呼吸的按钮加，别全局滥用（会增加内存开销）
- 写在动画前缀里，比如：
will-change: transform, opacity - 移动端 Safari 对
will-change更敏感，加了之后掉帧率明显下降
真正难调的不是动画本身，而是不同设备刷新率、后台标签页节流、以及开发者工具开着时动画计时器被干扰——这些细节不显眼，但会让呼吸节奏忽快忽慢。
