错峰登场通过animation-delay让多元素复用同一动画但启动时间错开，核心是延迟值分配与forwards保持终态；固定结构用:nth-child显式设递增延迟，动态场景用css变量+js计算赋值，负延迟可实现加载点等相位差效果。

关键帧动画配合 animation-delay 实现错峰登场，本质是让多个元素复用同一套 @keyframes，但通过不同延迟值错开启动时间，形成“波浪式”或“逐个浮现”的节奏感。核心不在动画本身多复杂，而在延迟值的分配逻辑和终态保持。

用 :nth-child 手动设置递增延迟

适合项数固定、结构清晰的场景（如导航菜单、卡片列表、加载圆点）。CSS 不支持计算表达式，必须显式声明每个延迟值：

• .item:nth-child(1) { animation-delay: 0s; }
• .item:nth-child(2) { animation-delay: 0.15s; }
• .item:nth-child(3) { animation-delay: 0.3s; }
• .item:nth-child(4) { animation-delay: 0.45s; }

间隔建议控制在 0.1s–0.3s 之间：太短不易察觉，太长则割裂感强。注意所有元素需统一设置 animation 属性（含名称、时长、填充模式），否则延迟无效。

用 CSS 自定义属性 + JS 动态赋值

适合项数不固定或需运行时调整的场景（如搜索结果列表、动态表单字段）：

• JS 中遍历元素：els.forEach((el, i) => el.style.setProperty('--delay', i * 0.2 + 's'));
• CSS 中引用：.item { animation-delay: var(--delay); }

这种方式可灵活切换步长（如从 0.2s 改为 0.1s 只需改一处），也便于响应式调整（例如移动端减半延迟）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

配合 forwards 保持终态，避免“回弹”

错峰登场后若希望元素停在最终位置（比如滑入后固定、淡入后不透明），必须加 animation-fill-mode: forwards：

• 没加 forwards：动画一结束，transform 或 opacity 会瞬间跳回初始值，破坏顺序效果
• 加了 forwards：元素停留在最后一帧定义的状态，视觉连贯，也利于后续交互

典型写法：animation: fadeInUp 0.4s ease-out 0.2s forwards; —— 其中 0.2s 是 delay，forwards 是关键收尾。

负延迟实现“已动起来”的相位差

对加载类动画（如三连点 …），可用负 animation-delay 让每个点从动画中段切入，模拟自然错落节奏：

• .dot:nth-child(1) { animation-delay: -0.6s; }
• .dot:nth-child(2) { animation-delay: -0.4s; }
• .dot:nth-child(3) { animation-delay: -0.2s; }

假设动画总长 1.2s，-0.4s 表示直接从约 33% 进度开始播放——不是倒放，而是跳帧切入，视觉上就是三点“各在不同跳动阶段”，更显生动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！