AOS需引入aos.css和aos.js并调用AOS.init()，再为元素添加data-aos属性（如fade-up）才能触发动画。缺任一环节均无效。
怎么在 HTML 里引入 AOS 并让元素滚动时自动动起来
直接上结论：AOS 不是原生 HTML 功能，必须通过 aos.js 和 aos.css 加载，且每个要动的元素得加 data-aos 属性。没加属性、没初始化、没引入 CSS，再好看的动画也出不来。
实操步骤很简单，但漏一步就白忙：
- 从 CDN 引入
aos.css（必须在<head>里）和aos.js（建议放在</body>前） - 给目标元素加上类似
data-aos="fade-up"的属性，值必须是 AOS 支持的动画名（比如zoom-in、slide-left） - 页面加载后必须手动调用
AOS.init()，否则所有data-aos都被忽略 - 注意：AOS 默认只对「进入视口」触发一次，不支持重复触发动画（除非显式配置
data-aos-once="false"）
常见 data-aos 值和对应效果怎么选
不是所有值都适合所有场景，选错会显得突兀或根本看不出变化。比如 data-aos="flip-left" 在小屏幕可能翻转失败，data-aos="fade" 在深色背景上容易看不见。
推荐优先试这几个稳妥值：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
fade-up：最常用，从下往上淡入，兼容性好，移动端表现稳定 -
zoom-in：适合卡片、图片，但别用在文字块上——缩放文字边缘会糊 -
slide-right/slide-left：适合横向布局模块，但注意父容器不能有overflow: hidden，否则动画中途被截断 -
flip-down：需要 3D 硬件加速，iOS Safari 旧版本可能卡顿，慎用于首屏关键内容
所有可用值见官方文档，但别全堆着试；先定一个，调好偏移和延迟再换。
AOS.init() 里哪些参数真正影响实际效果
很多人只写 AOS.init() 就跑，结果动画太快、太慢、或者滚到一半才开始动。核心就三个参数管用：
-
offset：元素距离视口顶部多少像素时触发（默认 120）。设太小（如 20），用户还没看到就播完了；设太大（如 300），可能滚动到底才动 -
duration：动画持续毫秒数（默认 1000）。文字建议 600–800，大区块可到 1200，别超过 1500，否则拖沓 -
easing：缓动函数，默认ease。想更自然就换ease-out-cubic，想快进快出用linear，但别用ease-in-back这类花哨的——移动端性能差
其他像 once、mirror、anchorPlacement 要按需开，不开比乱开强。
为什么加了 data-aos 却没反应？排查这四点
90% 的“不动”问题都出在这几个地方，不用查控制台也能快速定位：
- 检查
<head>里有没有<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/aos.css">—— 没 CSS，动画就是透明的 - 看浏览器控制台有没有
ReferenceError: AOS is not defined—— 说明aos.js没加载成功，或者加载顺序错了（JS 必须在 CSS 后、AOS.init()前） - 右键检查元素，确认
data-aos属性拼写正确，且没有多余空格或中文引号（比如写了data-aos = “fade-up”就失效） - 滚动时打开开发者工具的「Rendering」面板，勾选
Paint flashing，如果元素区域没闪红，说明 AOS 根本没把它当候选元素——大概率是该元素初始display: none或visibility: hidden
真遇到极端情况（比如 Vue/React 动态渲染后 AOS 不识别），别硬扛，手动调 AOS.refresh()，但别在每次 setState 后都刷——性能杀手。
