答案：结合CSS动画与页面滚动可通过JavaScript监听滚动触发动画，或使用实验性CSS scroll-timeline。具体：1. 设置scroll-behavior平滑滚动；2. 用Intersection Observer检测元素可见性，添加类触发动画；3. 可选CSS @scroll-timeline绑定动画到滚动进度；4. 常用于渐现、视差、进度条等场景，推荐JS+CSS组合方案。
在现代网页设计中，将 CSS 动画与页面滚动行为结合，可以实现流畅、富有交互感的视觉效果。这种技术常用于视差滚动、元素渐现、进度动画等场景。关键在于利用浏览器的滚动位置触发或控制 CSS 动画的播放状态。
1. 使用 scroll-behavior 与 @keyframes 基础动画
你可以先定义一个平滑滚动体验，并为元素设置基于 CSS 的动画：
html {
scroll-behavior: smooth;
}
.element {
opacity: 0;
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
这样元素在进入视口时默认播放动画。但此时动画是加载即执行，无法响应滚动。要真正“结合”滚动，需进一步控制动画触发时机。
2. 利用 JavaScript 监听滚动 + 添加类名触发动画
最常见且兼容性好的方式是通过 JavaScript 检测元素是否进入视口，然后添加类来启动 CSS 动画。
立即学习“前端免费学习笔记（深入）”；
// HTML
<div class="animate-on-scroll">滑动到我可见时开始动画</div>
// CSS
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s, transform 0.6s;
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
JavaScript 检测滚动位置：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
}
});
});
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
这种方式性能好，语义清晰，适合大多数项目。
3. 使用 CSS @scroll-timeline（实验性）
这是一个新兴的 CSS 特性，允许将动画绑定到滚动进度上，无需 JavaScript。
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-element {
animation: slideIn linear;
animation-timeline: scroll();
}
注意：scroll() 默认绑定主滚动容器。你也可以自定义滚动时间线：
@scroll-timeline myTimeline {
source: selector(#scroller);
orientation: vertical;
scroll-offsets: 0%, 100%;
}
.custom-animate {
animation: slideIn linear;
animation-timeline: myTimeline;
}
⚠️ 当前支持度较低（仅 Chromium 部分版本），适合实验项目，生产环境慎用。
4. 实际应用场景建议
- 内容渐现：标题、卡片随滚动淡入滑入
- 进度条动画：滚动百分比驱动加载动画
- 视差背景：多层元素以不同速度移动
- 锚点平滑跳转 + 动画反馈：点击导航滚动后高亮目标区域
推荐组合：CSS 定义动画样式，JavaScript 用 Intersection Observer 控制触发，兼顾表现力与兼容性。
基本上就这些，不复杂但容易忽略细节。
