呼吸动画必须用@keyframes定义循环，因transition仅响应单次状态变化；正确做法是用ease-in-out、3s周期的infinite动画，协同调整scale与box-shadow的模糊值及透明度，并通过translateZ(0)启用GPU加速，配合prefers-reduced-motion暂停。
呼吸动画用 animation 而不是 transition
呼吸效果本质是周期性缩放 + 颜色/阴影渐变，必须用 @keyframes 定义循环，transition 只能响应一次状态变化，无法自动来回。常见错误是给 :hover 加 transform: scale(1.1) 配 transition，结果只“吸气”不“呼气”，鼠标移开就卡住。
正确做法是独立定义动画，让元素持续运行：
@keyframes breathe {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 12px rgba(0,123,255,0.4);
}
50% {
transform: scale(1.08);
box-shadow: 0 0 28px rgba(0,123,255,0.7);
}
}
然后绑定到按钮：
button {
animation: breathe 3s ease-in-out infinite;
}
-
ease-in-out让缩放和阴影扩散更自然，避免机械感 - 别用
linear—— 呼吸需要“慢起慢落”，否则像心跳机报警 - 时间设为
3s或更长，短于2s容易引发视觉疲劳
box-shadow 扩散靠模糊半径和透明度协同变化
单纯增大 box-shadow 的模糊值（如从 12px 到 32px）会让光晕变“虚”，但缺乏呼吸的“聚-散”张力。必须同步调整透明度：模糊越大，透明度越高，否则峰值时阴影会糊成一片脏色。
典型错误写法：
/* 错！透明度不变，扩散后过曝 */
50% { box-shadow: 0 0 32px rgba(0,123,255,0.7); }
推荐配比（以蓝色为例）：
- 基础态：
box-shadow: 0 0 12px rgba(0,123,255,0.4) - 扩张峰：
box-shadow: 0 0 28px rgba(0,123,255,0.7)—— 模糊+16px，透明度+0.3，视觉上才显“饱满膨胀” - 若用深色背景，可把透明度再压低
0.2–0.3，避免光晕吃掉文字
避免动画卡顿：启用硬件加速与控制重绘
频繁修改 box-shadow 和 transform 会触发层合成（compositing），低端设备容易掉帧。关键不是加 will-change，而是用 transform: translateZ(0) 或 scaleZ(1) 提前升层。
安全写法：
button {
transform: translateZ(0); /* 强制 GPU 加速 */
animation: breathe 3s ease-in-out infinite;
}
- 不要对
box-shadow单独加will-change: box-shadow—— 浏览器无法优化，反而增加内存开销 - 如果按钮内含文字，确保
font-smoothing一致，否则缩放时文字边缘会闪烁 - 在 Safari 上测试时，加
-webkit-backface-visibility: hidden防止偶发锯齿
响应式中断：用 @media 暂停动画而非降级
小屏设备上呼吸动画干扰阅读、耗电、甚至诱发眩晕。直接删掉 animation 不够——用户缩放页面或切到后台再回来，可能残留动画状态。应该用媒体查询主动暂停：
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
button {
animation-play-state: paused;
}
}
-
prefers-reduced-motion: reduce是 WCAG 推荐方案，iOS/Android 系统设置开启“减少动画”时自动生效 - 别用
display: none或visibility: hidden控制，会破坏按钮可访问性 - 如果业务强依赖动效（如游戏类按钮），至少把周期拉长到
5s以上，降低生理刺激强度
真正难的不是写出来，是控制好扩散节奏和断点逻辑——阴影太猛像警灯，太弱像没动；动画停得太突兀，用户会觉得界面“死了一下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
