首先引入Animate.css并设置目标元素的默认隐藏状态，然后通过JavaScript监听滚动事件，利用getBoundingClientRect判断元素是否进入视口，若进入且未触发过动画，则添加对应animate__animated类和data-animate指定的动画类，并标记animateanimated-done防止重复播放，最后可通过CSS变量控制动画延迟与持续时间，实现流畅的滚动触发动画效果。
要实现CSS滚动动画效果，特别是结合 Animate.css 实现在页面滚动到某个元素时触发动画，核心思路是：检测元素是否进入视口（可视区域），然后为该元素添加 Animate.css 提供的动画类。以下是具体实现方法。
1. 引入 Animate.css
在页面中引入 Animate.css 文件，可以通过 CDN 快速加载：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>这样你就可以使用 Animate.css 中的所有动画类，例如：animate__fadeIn、animate__slideInUp 等。
2. 设置目标元素默认状态
给需要触发动画的元素设置初始状态：隐藏或无动画。同时预留动画触发后的类名位置。
立即学习“前端免费学习笔记（深入）”；
animate__animated 是 Animate.css 的基础类，所有动画都需要它。data-animate 属性用于存储你想触发的动画名称。
3. 使用 JavaScript 检测元素是否进入视口
通过监听 scroll 事件，判断元素是否出现在可视区域内。一旦进入视口，就添加对应的动画类。
<script>function isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return rect.top <= window.innerHeight && rect.bottom >= 0;
}
function handleScrollAnimation() {
document.querySelectorAll('[data-animate]').forEach(el => {
if (isElementInViewport(el) && !el.classList.contains('animateanimated-done')) {
const animation = el.getAttribute('data-animate');
el.classList.add(animation, 'animateanimated-done');
}
});
}
window.addEventListener('scroll', handleScrollAnimation);
window.addEventListener('load', handleScrollAnimation);
</script>
说明：
- getBoundingClientRect() 判断元素位置。
- 添加 animate__animated-done 类防止动画重复触发。
- 在页面加载和滚动时都执行一次检测，确保首屏内容也能触发。
4. 可选：添加延迟或动画持续时间控制
你可以通过 CSS 自定义动画的延迟或速度：
<style>[data-animate] {
--animate-delay: 0.3s;
--animate-duration: 1s;
}
</style>
Animate.css 支持 CSS 变量控制动画行为，无需额外 JS。
基本上就这些。结合 Animate.css 和简单的滚动监听，就能轻松实现流畅的滚动触发动画效果，提升页面交互体验。关键是控制好触发时机，避免动画频繁播放。
