css animation与scroll滚动动画结合-css教程-PHP中文网

css animation与scroll滚动动画结合

P粉602998670

发布： 2025-10-31 13:36:02

原创

343人浏览过

答案：结合CSS动画与页面滚动可通过JavaScript监听滚动触发动画，或使用实验性CSS scroll-timeline。具体：1. 设置scroll-behavior平滑滚动；2. 用Intersection Observer检测元素可见性，添加类触发动画；3. 可选CSS @scroll-timeline绑定动画到滚动进度；4. 常用于渐现、视差、进度条等场景，推荐JS+CSS组合方案。

css animation与scroll滚动动画结合

在现代网页设计中，将 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);
});

登录后复制

这种方式性能好，语义清晰，适合大多数项目。

啵啵动漫

一键生成动漫视频，小白也能轻松做动漫。

123

查看详情

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 部分版本），适合实验项目，生产环境慎用。