最直接方式是用@keyframes定义opacity与scale交替的pulse动画，时长2s、ease-in-out、infinite循环；多步引导用animation-delay错开启动；停用时用animation-play-state:paused而非删class。
用 @keyframes 配合 animation 实现基础提示引导
最直接的方式是定义一个循环闪烁或缩放的动画，作用于目标元素（比如按钮旁的「新手引导」小气泡）。关键不是动得花哨，而是让用户一眼注意到它。
-
@keyframes里避免用opacity: 0完全隐藏——人眼对「明暗交替」比「显隐切换」更敏感，建议用opacity: 0.4 → 1 - 动画时长控制在
2s左右，太快看不清，太慢像卡顿；animation-iteration-count: infinite保持持续提示 - 别直接写
animation: pulse 2s infinite;——要补全animation-timing-function: ease-in-out，否则线性过渡显得生硬
@keyframes pulse {
0% { opacity: 0.4; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0.4; transform: scale(0.95); }
}
.guide-bubble {
animation: pulse 2s ease-in-out infinite;
}
用 animation-delay 控制多步引导节奏
如果页面有多个引导点（比如步骤 1→2→3），不能让它们同时闪。靠 animation-delay 错开启动时间是最轻量的做法。
- 第 2 步比第 1 步晚
1.5s开始，第 3 步再晚1.5s，形成「依次点亮」效果 - 延迟值必须大于单次动画时长，否则会重叠混乱；例如动画本身是
2s，延迟至少设为2.2s - 不要用 JS 动态加 class 控制节奏——CSS 原生延迟更稳定，且不依赖 JS 执行时机
.guide-step-1 { animation: pulse 2s ease-in-out infinite; }
.guide-step-2 { animation: pulse 2s ease-in-out infinite 2.2s; }
.guide-step-3 { animation: pulse 2s ease-in-out infinite 4.4s; }
避免 will-change: transform 引发的渲染异常
加了缩放/位移动画后，部分 Chrome 或 Safari 可能出现文字模糊、边缘锯齿，甚至触发硬件加速导致滚动卡顿。
- 只在真正需要动画的元素上加
will-change，且动画结束后手动移除（可用animationend事件） - 更稳妥的替代方案：用
transform: translateZ(0)触发 GPU 加速，兼容性更好，副作用更小 - 如果引导元素含文字，务必检查
backface-visibility: hidden是否生效——没加这句，3D 变换下文字可能翻转消失
关闭引导时，用 animation-play-state: paused 而非删 class
用户点击「跳过」或「我知道了」后，动画要立刻停住，而不是等当前周期播完。直接删 class 会导致样式闪回，体验断层。
立即学习“前端免费学习笔记（深入）”；
- 给引导元素加统一 class 如
is-guiding，默认启用动画；关闭时只改状态：element.classList.remove('is-guiding') - 或者更精确：用内联样式临时暂停：
el.style.animationPlayState = 'paused' - 千万别用
display: none或visibility: hidden粗暴隐藏——动画还在后台跑，浪费资源，还可能触发内存泄漏
复杂点在于多端适配：移动端触摸区域小，引导气泡需放大点击热区；而动画帧率在低端安卓机上容易掉帧，建议降为 1.5s 循环，并禁用 transform: scale() 改用纯 opacity 变化保底。
