用border-color实现脉冲需固定宽度、以rgba透明度过渡；outline适合外扩式脉冲因不占布局空间；box-shadow更兼容且性能优；移动端卡顿主因是硬件加速未启用、关键帧过多及overflow重绘。
用 @keyframes 配合 border-color 实现基础脉冲
边框脉冲本质是让边框颜色在透明/半透明和实色之间循环过渡，不能靠单纯改变 border-width（会触发重排），必须只动可动画的属性。最稳妥的方式是固定 border-width，只对 border-color 做 opacity 渐变效果。
关键点：起始色要用带 alpha 的 rgba，比如 rgba(0, 123, 255, 0)，终点用 rgba(0, 123, 255, 0.8)；别用 transparent，它在部分浏览器中与 rgba 透明度插值行为不一致。
@keyframes border-pulse {
0% {
border-color: rgba(0, 123, 255, 0);
}
50% {
border-color: rgba(0, 123, 255, 0.8);
}
100% {
border-color: rgba(0, 123, 255, 0);
}
}
为什么 outline 比 border 更适合做“外扩式”脉冲
如果想实现边框向外扩散再收缩的视觉效果（类似通知环），直接 animating border 会导致内容区域抖动——因为 border 占据布局空间。这时应该用不占布局空间的 outline，再配合 outline-offset 控制距离。
-
outline不影响文档流，不会挤开文字或相邻元素 -
outline-offset可以从负值到正值动画，制造“吸-放”感 - 注意：
outline不支持圆角，如需 rounded 效果，得用box-shadow替代
.pulse-outline {
outline: 2px solid #007bff;
outline-offset: 0;
animation: outline-pulse 2s infinite;
}
@keyframes outline-pulse {
0% {
outline-offset: 0;
opacity: 0.6;
}
50% {
outline-offset: 8px;
opacity: 1;
}
100% {
outline-offset: 0;
opacity: 0.6;
}
}
用 box-shadow 实现无兼容问题的双层脉冲
当需要更平滑、更可控的“光晕式”脉冲，或者要兼容老版 Safari（对 outline-offset 动画支持差），box-shadow 是更可靠的选择。它能模拟多层边框，并且所有主流浏览器对 box-shadow 的动画支持都很好。
立即学习“前端免费学习笔记（深入）”；
常见错误：只写一个 shadow 导致边缘生硬；正确做法是叠加两个不同模糊度和偏移的 shadow，一近一远，再同步动画它们的 opacity 或 spread-radius（后者需转为 inset 或用 rgba 控制）。
- 避免用
spread-radius动画——它不可直接动画，需通过改变box-shadow整体值来模拟 - 推荐用 rgba 颜色 + 模糊半径变化，例如：
0 0 0 0 rgba(0,123,255,0)→0 0 12px 4px rgba(0,123,255,0.4) - 性能更好：
box-shadow属于合成层属性，GPU 加速更稳定
.pulse-shadow {
animation: shadow-pulse 1.8s infinite ease-in-out;
}
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
}
70% {
box-shadow: 0 0 0 10px rgba(0, 123, 255, 0.3);
}
100% {
box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
}
}
移动端真机上脉冲动画卡顿的三个实际原因
开发时在桌面 Chrome 看着流畅，但放到 iOS 或安卓真机就掉帧，往往不是代码问题，而是渲染链路上的隐性限制。
- iOS Safari 默认禁用非
transform/opacity的动画硬件加速，border-color动画很可能跑在 CPU 上——加will-change: border-color无效，得改用box-shadow或强制开启合成层：transform: translateZ(0) - Android WebView（尤其旧版）对
@keyframes中超过 3 个关键帧的插值计算不准，建议控制在 3 帧以内（0%, 50%, 100%） - 动画元素若父容器有
overflow: hidden且自身有阴影或圆角，某些安卓机型会触发全层重绘，导致卡顿；可尝试加isolation: isolate隔离合成上下文
最简验证方式：在真机上打开开发者工具（Safari Web Inspector 或 Chrome Remote Debugging），开启 FPS meter，观察是否稳定在 60fps。掉帧时优先砍掉 border-style 变化、filter、或多余伪元素。
