纯CSS引导动画需分步定义@keyframes（如step-1-highlight），用百分比精确控制各状态起止，配合JS切换class或CSS变量驱动流程；高亮区域通过伪元素+绝对定位手动对齐目标元素，确保pointer-events: none且硬件加速属性优先。
用 @keyframes 做页面引导动画，核心是分步控制 opacity / transform / z-index
纯 CSS 引导动画不依赖 JS，但必须把每一步“高亮区域 + 提示气泡 + 过渡节奏”拆成独立关键帧段。不能指望一个 @keyframes 走完全程——它只定义状态变化，不处理触发逻辑。真正控制哪一步播放、何时暂停，得靠 JS 切换 class 或 CSS 变量驱动。
常见错误是把所有步骤塞进一个动画里，结果无法中途跳步、无法响应用户点击跳过、也无法适配不同屏幕尺寸下的定位偏移。
- 每步引导建议单独定义一个
@keyframes（比如step-1-highlight、step-2-bubble-in） - 用
animation-fill-mode: forwards保证动画停在最后一帧，避免闪回 - 气泡提示的
transform: scale()和背景蒙层的opacity必须错开时间，否则视觉打架
如何让高亮区域精准套住目标元素（如按钮或输入框）
CSS 动画本身不能自动获取 DOM 尺寸和位置，所以“套住”只能靠预设：要么目标元素有固定宽高和定位方式，要么你用 JS 把它的 getBoundingClientRect() 结果转为 CSS 变量传给动画。
更实际的做法是：给目标元素加一层 position: relative，再用伪元素 ::before 绝对定位覆盖，通过 inset 或 top/left/width/height 手动对齐——这样动画只作用于伪元素，不影响原元素交互。
立即学习“前端免费学习笔记（深入）”；
.target-element {
position: relative;
}
.target-element::before {
content: "";
position: absolute;
inset: 0;
border: 2px solid #4f46e5;
border-radius: 6px;
pointer-events: none;
animation: highlight-pulse 2s infinite;
}
注意：pointer-events: none 必须加，否则会挡住点击；inset: 0 在支持它的浏览器中比写四个方向更简洁，不支持时 fallback 到 top: 0; left: 0; right: 0; bottom: 0。
@keyframes 中怎么控制多步节奏和延迟
关键不是堆时间值，而是用百分比明确每个状态起止点。比如想让蒙层先淡入（0–30%），再停顿（30–70%），最后气泡从下方滑入（70–100%），就得按比例切分，而不是靠 animation-delay 拼接多个动画——后者难同步、难调试。
@keyframes step-1 {
0% {
opacity: 0;
}
30% {
opacity: 0.8;
}
70% {
opacity: 0.8;
}
100% {
opacity: 0.8;
transform: translateY(-10px);
}
}
- 百分比总和必须是 100%，否则浏览器可能插值异常
- 停顿靠重复同一状态的起止帧（如 30% 和 70% 都设为
opacity: 0.8） - 如果某步需要“等待用户操作”，CSS 无法实现，必须由 JS 在用户点击后才添加下一阶段的 class
移动端适配和性能容易被忽略的点
在 iOS Safari 上，transform 和 opacity 是唯二能硬件加速的属性，其他如 width、height、left 触发动态布局重排，会导致卡顿甚至白屏。引导动画一旦卡住，用户直接关掉页面。
另外，iOS 对 @keyframes 的解析比桌面端更严格：百分比不能写成 0.5%，必须是整数；animation-timing-function 避免用 cubic-bezier(0,1,1,0) 这类极端值，容易崩溃。
- 始终用
transform: translateX()替代left，用transform: scale()替代width/height - 蒙层全屏时，用
position: fixed; width: 100vw; height: 100vh，别用100%，否则滚动时错位 - 动画时长建议控制在 200–400ms 单步，总流程不超过 3 步，否则用户失去耐心
最麻烦的其实是“引导结束后的状态清理”：CSS 动画不会自动移除 class，JS 必须监听 animationend 并清除临时样式，否则后续交互可能被残留的 z-index 或 opacity 干扰。
