使用AOS库结合Animate.css实现滚动触发动画：1. 引入AOS的CSS和JS文件；2. 通过AOS.init()初始化；3. 为元素添加data-aos="动画名"等属性即可实现滚动入场效果，如fade-up、zoom-in等，支持设置持续时间、延迟和缓动函数，适用于官网、作品集等场景。
Animate.css 是一个流行的 CSS 动画库，可以轻松为元素添加出场、入场等动画效果。要实现“元素在页面滚动到其位置时才触发动画”，也就是常说的“滚动入场”动画，可以通过 Animate.css 提供的 scroll-trigger 类配合 JavaScript 快速实现。
1. 引入 Animate.css 和 AOS（Animate on Scroll）
虽然 Animate.css 本身不直接提供滚动触发功能，但通常会搭配 AOS（Animate on Scroll Library） 来实现滚动触发动画。AOS 就是专为 scroll-trigger 设计的轻量级库。
在页面 <head> 中引入 AOS 的 CSS 和 JS：
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
2. 初始化 AOS
在页面底部或 DOM 加载完成后初始化 AOS：
立即学习“前端免费学习笔记（深入）”；
<script> AOS.init(); </script>
这会让所有带有 data-aos 属性的元素在滚动进入视口时触发动画。
3. 给元素添加滚动入场动画
使用 data-aos 属性指定动画名称，例如淡入、滑入等：
<div data-aos="fade-up" data-aos-duration="800" data-aos-delay="100"> 这个元素会在滚动时从下方淡入。 </div>
-
data-aos="fade-up"：向上淡入动画（Animate.css 中的
animate__fadeInUp对应效果） - data-aos-duration：动画持续时间（毫秒）
- data-aos-delay：延迟触发时间
-
data-aos-easing：缓动函数，如
ease-out-back
4. 常用滚动动画效果（对应 Animate.css 类名）
AOS 内部映射了 Animate.css 的动画，常见值包括：
-
fade-up- 从下往上淡入 -
fade-down- 从上往下淡入 -
fade-left/fade-right- 侧边淡入 -
zoom-in/zoom-out- 缩放出现 -
slide-up/slide-left等 - 滑动入场
这些都会自动加上 animate__ 前缀并应用到元素上。
基本上就这些。引入 AOS，加个属性，调几个参数，滚动入场动画就跑起来了，简单又高效。适合快速搭建宣传页、官网、作品集等需要视觉动效的场景。
