在前端页面开发中，我们经常会遇到需要让元素在用户滚动到特定位置时才播放动画的需求，比如页面滚动到服务介绍区域时，卡片依次滑入视野，或者滚动到数据统计模块时数字动态增长。这种效果需要将CSS动画和滚动事件结合起来实现，既利用CSS动画的流畅渲染能力，又通过滚动事件控制动画的触发时机。
核心实现原理
整个实现过程主要分为两个步骤，首先是定义好需要播放的CSS动画，然后通过JavaScript监听页面的滚动事件，计算目标元素相对于视口的位置，当元素进入视口范围内时，给元素添加对应的动画类，触发CSS动画播放。
1. 定义CSS动画
我们先定义一个简单的元素滑入动画，元素初始状态在视口左侧外部，透明度为0，当添加动画类后，元素会平移到正常位置，同时透明度变为1，整个过程持续0.6秒，带有缓动效果。
/* 初始状态：元素在左侧外部，透明 */
.slide-element {
opacity: 0;
transform: translateX(-100px);
transition: all 0.6s ease-out;
}
/* 动画触发后的状态：回到正常位置，不透明 */
.slide-element.active {
opacity: 1;
transform: translateX(0);
}
2. 监听滚动事件判断触发条件
接下来需要通过JavaScript监听scroll事件，获取目标元素的位置信息。这里我们使用getBoundingClientRect方法获取元素相对于视口的位置，其中top属性表示元素顶部到视口顶部的距离，当这个距离小于视口高度时，说明元素已经进入视口范围，此时给元素添加active类触发动画。
// 获取所有需要触发动画的元素
const animateElements = document.querySelectorAll('.slide-element');
// 监听滚动事件
window.addEventListener('scroll', function() {
// 获取视口高度
const windowHeight = window.innerHeight;
animateElements.forEach(element => {
// 获取元素相对于视口的位置
const elementTop = element.getBoundingClientRect().top;
// 当元素顶部距离视口顶部小于视口高度时，触发动画
if (elementTop < windowHeight) {
element.classList.add('active');
}
});
});
// 页面加载完成后先执行一次，处理初始状态就在视口内的元素
window.dispatchEvent(new Event('scroll'));
完整示例代码
下面是一个完整的HTML示例，包含三个需要触发动画的卡片元素，滚动到卡片位置时卡片会依次滑入。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画与滚动事件结合示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
.placeholder {
height: 800px;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #666;
}
.card-container {
width: 80%;
margin: 50px auto;
display: flex;
flex-direction: column;
gap: 30px;
}
.card {
width: 100%;
height: 200px;
background-color: #4a90e2;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
/* 初始状态：左侧外部，透明 */
opacity: 0;
transform: translateX(-100px);
transition: all 0.6s ease-out;
}
/* 动画触发后的状态 */
.card.active {
opacity: 1;
transform: translateX(0);
}
</style>
</head>
<body>
<div class="placeholder">
向下滚动查看动画效果
</div>
<div class="card-container">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
</div>
<div class="placeholder">
页面底部区域
</div>
<script>
const cards = document.querySelectorAll('.card');
const windowHeight = window.innerHeight;
function checkScroll() {
cards.forEach(card => {
const cardTop = card.getBoundingClientRect().top;
if (cardTop < windowHeight) {
card.classList.add('active');
}
});
}
window.addEventListener('scroll', checkScroll);
// 初始加载时检查一次
checkScroll();
</script>
</body>
</html>
性能优化建议
滚动事件默认会高频触发，如果直接在滚动事件处理函数中执行大量DOM操作，很容易造成页面卡顿，因此实际开发中需要做对应的优化：
- 使用节流函数限制滚动事件的处理频率，比如每100毫秒最多执行一次检查逻辑，减少不必要的计算。
- 对于已经触发过动画的元素，可以在添加
active类之后，从待检查的元素列表中移除，避免重复检查。 - 尽量使用
transform和opacity属性实现动画，这两个属性的动画不会触发页面的重排和重绘，性能更好。
常见问题说明
有些开发者可能会遇到动画只触发一次，之后滚动回去再滚回来不会重新播放的问题，这是因为上面的示例中元素触发动画后不会移除active类。如果需要动画反复触发，可以在元素离开视口时移除active类，判断逻辑可以基于getBoundingClientRect的bottom属性，当元素底部小于0或者顶部大于视口高度时，说明元素已经离开视口，此时移除active类即可。
注意：如果页面中存在多个不同动画的元素，可以给不同元素定义不同的动画类，在滚动检查时根据元素的标识添加对应的动画类，实现差异化的动画触发效果。
CSS_animationscroll事件滚动动画前端交互修改时间：2026-06-27 04:03:30