css 页面引导动画如何实现_利用 keyframes 定义引导步骤_技术教程

纯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 干扰。