初学者如何用CSS实现滚动动画_CSS scroll-behavior与keyframes结合

P粉602998670 2025-10-30 00:00:00 次阅读

掌握滚动动画需理解：1. scroll-behavior: smooth 实现页面平滑滚动；2. @keyframes 定义元素进入动画如淡入上浮；3. 结合 Intersection Observer API 在元素可见时触发动画；4. 实际应用中控制动画时长0.5-0.8秒，避免复杂效果影响性能。

实现滚动动画对初学者来说并不难，关键是理解两个核心：CSS 的 scroll-behavior 控制页面滚动方式，而 @keyframes 则用于创建视觉上的动画效果。两者结合可以做出流畅的页面滚动与元素动态展示。

1. 使用 scroll-behavior 实现平滑滚动

想要让页面内锚点跳转变得顺滑，不需要 JavaScript，只需在根元素或 html 上设置 scroll-behavior: smooth。

示例：

html {
  scroll-behavior: smooth;
}

然后设置导航链接指向页面中的某个 ID：

跳转到第二节

点击链接时，页面会自动以平滑方式滚动到目标位置，而不是瞬间跳转。

2. 用 @keyframes 创建进入动画

scroll-behavior 只控制滚动行为，要让元素在滚动过程中“动起来”，需要用 @keyframes 定义动画，比如淡入、上浮等效果。

常见做法：

初始状态（opacity: 0, transform: translateY(20px)）
滚动到可视区域后变为完全显示（opacity: 1, transform: translateY(0)）
通过 transition 或 animation 应用过渡

示例动画定义：

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animated-section {
animation: fadeInUp 0.6s ease-out forwards;
}

3. 结合 Intersection Observer 触发动画

CSS 本身无法判断“滚动到某位置才开始动画”，所以需要一点点 JavaScript 来监听元素是否进入视口。

基本思路：

给需要动画的元素添加类名，如 .animate-on-scroll
页面滚动时，检测这些元素是否出现在视野中
一旦出现，就加上 .animated 类触发 @keyframes 动画

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);
});

CSS 配合：

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}