css滚动动画效果怎么实现_使用Animate.css滚动触发动画类-css教程-PHP中文网

css滚动动画效果怎么实现_使用Animate.css滚动触发动画类

P粉602998670

发布： 2025-12-01 12:42:06

原创

731人浏览过

首先引入Animate.css并设置目标元素的默认隐藏状态，然后通过JavaScript监听滚动事件，利用getBoundingClientRect判断元素是否进入视口，若进入且未触发过动画，则添加对应animate__animated类和data-animate指定的动画类，并标记animateanimated-done防止重复播放，最后可通过CSS变量控制动画延迟与持续时间，实现流畅的滚动触发动画效果。

css滚动动画效果怎么实现_使用animate.css滚动触发动画类

要实现CSS滚动动画效果，特别是结合 Animate.css 实现在页面滚动到某个元素时触发动画，核心思路是：检测元素是否进入视口（可视区域），然后为该元素添加 Animate.css 提供的动画类。以下是具体实现方法。

1. 引入 Animate.css

在页面中引入 Animate.css 文件，可以通过 CDN 快速加载：

这样你就可以使用 Animate.css 中的所有动画类，例如：animate__fadeIn、animate__slideInUp 等。

2. 设置目标元素默认状态

给需要触发动画的元素设置初始状态：隐藏或无动画。同时预留动画触发后的类名位置。

立即学习“前端免费学习笔记（深入）”；

<div class="animate__animated" data-animate="animate__fadeInUp">滚动到我就会出现</div>

animate__animated 是 Animate.css 的基础类，所有动画都需要它。data-animate 属性用于存储你想触发的动画名称。

Cowriter

AI 作家，帮助加速和激发你的创意写作

107

查看详情

3. 使用 JavaScript 检测元素是否进入视口

通过监听 scroll 事件，判断元素是否出现在可视区域内。一旦进入视口，就添加对应的动画类。

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 类防止动画重复触发。
- 在页面加载和滚动时都执行一次检测，确保首屏内容也能触发。