在网页开发中，为页面元素添加滚动触发的动画效果可以显著提升用户的浏览体验，Animate.css作为成熟的CSS动画库，配合Scroll滚动监听方案，可以快速实现各类复杂的页面特效，无需从零编写复杂的动画逻辑和滚动判断代码。
基础环境准备
首先需要引入Animate.css库，推荐通过CDN的方式引入，避免额外下载资源。同时需要准备基础的HTML结构，定义需要添加动画的目标元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动动画示例</title>
<!-- 引入Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
/* 基础样式，模拟页面长内容 */
.section {
height: 600px;
padding: 50px;
margin: 20px 0;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* 初始隐藏动画元素，避免未触发时显示 */
.animate-target {
opacity: 0;
}
</style>
</head>
<body>
<div class="section">页面顶部内容</div>
<div class="section">
<div class="animate-target" data-animate="fadeInLeft">左侧淡入元素</div>
</div>
<div class="section">
<div class="animate-target" data-animate="fadeInRight">右侧淡入元素</div>
</div>
<div class="section">
<div class="animate-target" data-animate="zoomIn">缩放进入元素</div>
</div>
<div class="section">页面底部内容</div>
</body>
</html>
实现滚动监听逻辑
核心思路是监听页面的滚动事件，判断目标元素是否已经进入浏览器的可视区域，当元素进入可视区域时，为其添加Animate.css对应的动画类，同时可以设置动画结束后是否保留样式，以及是否允许重复触发动画。
滚动监听函数实现
我们可以通过getBoundingClientRect方法获取元素相对于视口的位置，判断元素的顶部是否已经进入视口范围内。
// 获取所有需要添加动画的目标元素
const animateTargets = document.querySelectorAll('.animate-target');
// 定义滚动监听函数
function handleScrollAnimation() {
// 可视区域的高度
const windowHeight = window.innerHeight;
// 触发动画的阈值，元素进入视口多少距离时触发，这里设置为元素顶部距离视口底部100px时触发
const triggerThreshold = 100;
animateTargets.forEach(target => {
// 获取元素相对于视口的位置信息
const rect = target.getBoundingClientRect();
// 判断元素是否已经进入触发区域：元素底部在视口内，且元素顶部距离视口顶部的距离小于视口高度加阈值
const isInView = rect.top < windowHeight - triggerThreshold && rect.bottom > 0;
if (isInView && !target.classList.contains('animated')) {
// 获取元素自定义属性中设置的动画名称
const animateName = target.getAttribute('data-animate');
// 添加Animate.css的动画类，animate__为4.x版本的前缀
target.classList.add('animate__animated', `animate__${animateName}`);
// 标记已经添加过动画，避免重复触发
target.classList.add('animated');
// 动画结束后设置透明度为1，避免动画结束后元素消失
target.style.opacity = 1;
}
});
}
// 初始加载时先执行一次，处理页面刷新时已经在可视区域的元素
handleScrollAnimation();
// 监听滚动事件
window.addEventListener('scroll', handleScrollAnimation);
// 监听窗口大小变化事件，避免窗口 resize 后判断出错
window.addEventListener('resize', handleScrollAnimation);
进阶配置技巧
控制动画重复触发
如果希望元素每次进入可视区域都重新触发动画，可以去掉标记animated的逻辑，改为在元素离开可视区域时移除动画类，重新进入时再次添加。
function handleScrollAnimationRepeat() {
const windowHeight = window.innerHeight;
const triggerThreshold = 100;
animateTargets.forEach(target => {
const rect = target.getBoundingClientRect();
const isInView = rect.top < windowHeight - triggerThreshold && rect.bottom > 0;
const animateName = target.getAttribute('data-animate');
if (isInView) {
// 进入可视区域时添加动画类
target.classList.add('animate__animated', `animate__${animateName}`);
target.style.opacity = 1;
} else {
// 离开可视区域时移除动画类，方便下次进入重新触发
target.classList.remove('animate__animated', `animate__${animateName}`);
target.style.opacity = 0;
}
});
}
window.addEventListener('scroll', handleScrollAnimationRepeat);
window.addEventListener('resize', handleScrollAnimationRepeat);
调整动画时长和延迟
Animate.css支持通过自定义CSS变量调整动画的时长和延迟，无需修改库本身的代码。可以在目标元素或者全局样式中添加对应的变量配置。
/* 全局设置动画时长为1秒 */
:root {
--animate-duration: 1s;
}
/* 单独为某个元素设置动画延迟0.5秒 */
.animate-target[data-animate="zoomIn"] {
--animate-delay: 0.5s;
}
性能优化建议
滚动事件默认触发频率很高，直接绑定滚动事件可能导致性能问题，建议对滚动事件进行节流处理，减少函数的执行次数。
// 节流函数，控制函数在一定时间内只执行一次
function throttle(fn, delay) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
};
}
// 使用节流后的滚动监听
window.addEventListener('scroll', throttle(handleScrollAnimation, 100));
window.addEventListener('resize', throttle(handleScrollAnimation, 100));
另外，如果页面中需要添加动画的元素数量较多，可以使用Intersection Observer API替代滚动事件监听，该API是浏览器原生提供的交叉观察器，性能优于手动监听滚动和计算位置。只需要在Observer的回调中处理元素进入可视区域的逻辑即可，无需手动计算元素位置。
Animate.cssScroll动画页面特效CSS动画修改时间：2026-06-29 12:51:30