讲解animation-timeline属性与scroll-timeline结合实现滚动驱动动画的原理，通过示例代码展示应用

最新推荐文章于 2025-06-23 14:42:37 发布

原创最新推荐文章于 2025-06-23 14:42:37 发布 · 1.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

大白话前端八股专栏收录该内容

730 篇文章

订阅专栏

大白话讲解`animation-timeline`属性与`scroll-timeline`结合实现滚动驱动动画的原理，通过示例代码展示应用

在前端开发的日常工作中，你是不是经常为了实现一个炫酷又自然的动画效果而绞尽脑汁？传统的CSS动画虽然好用，但在实现与页面滚动联动的动画时，总是显得力不从心。比如，想要做一个随着页面滚动逐渐显现的图片画廊，或者让导航栏在滚动过程中平滑地改变样式，常规方法要么代码繁琐，要么效果生硬。别担心，今天就给大家介绍两个超好用的CSS属性——animation-timeline与scroll-timeline，它们结合起来，能轻松实现超酷的滚动驱动动画，让你的页面瞬间“活”起来！

一、传统动画在滚动交互中的困境

在如今注重用户体验的Web时代，页面的交互效果至关重要。动画作为提升交互感的重要手段，被广泛应用在各种网页中。然而，当涉及到滚动相关的动画时，前端工程师们常常会遇到不少麻烦。

以常见的电商产品展示页为例，我们希望用户在滚动页面时，商品卡片能逐个从侧面滑入视线，就像一个个精心准备的惊喜等待被发现。如果使用传统的CSS动画，我们通常需要借助JavaScript来监听滚动事件，计算元素的位置，然后动态地添加或移除动画类名。这种方式不仅代码量大，而且在性能上也存在隐患，一旦页面元素过多，频繁的滚动事件监听和DOM操作可能会导致页面卡顿，严重影响用户体验。

再比如，制作一个具有故事性的网页，需要随着滚动展示不同的场景变化。传统做法下，要精确控制每个场景动画的触发时机和持续时间，难度非常大，稍有不慎就会出现动画衔接不自然的情况，让整个故事的连贯性大打折扣。

这些痛点都在呼唤一种更简单、高效的解决方案，而animation-timeline与scroll-timeline的出现，恰好满足了这一需求。

二、深入剖析animation-timeline与scroll-timeline

2.1 animation-timeline属性

animation-timeline属性用于定义动画的时间线。在传统的CSS动画中，动画的时间线通常是基于元素加载完成后开始计时，通过animation-duration、animation-delay等属性来控制动画的时长和延迟。而animation-timeline可以让我们自定义动画的时间线，使其不再局限于默认的时间基准。

它有几个主要的值：

none：这是默认值，表示使用常规的动画时间线，与传统的动画表现一致。
local：动画时间线基于元素自身的生命周期，例如当元素进入或离开视口时，动画会根据其自身的状态进行播放。
scroll：动画时间线与页面滚动关联，这就为实现滚动驱动动画提供了可能。

2.2 scroll-timeline属性

scroll-timeline属性则是专门用于创建基于滚动的时间线。它允许我们将动画的播放与页面的滚动操作紧密结合起来。通过设置scroll-timeline，我们可以指定动画在页面滚动到哪个位置开始播放，以及在滚动的哪个范围内持续播放。

scroll-timeline的常用语法如下：

scroll-timeline: <scroll-source> <start-offset>? <end-offset>?;

<scroll-source>：指定滚动源，可以是html或某个具有滚动条的元素，用于确定动画与哪个滚动对象关联。
<start-offset>：定义动画开始播放时滚动条的位置，可以使用百分比、像素值等单位。
<end-offset>：定义动画结束播放时滚动条的位置。

2.3 两者结合的原理

当animation-timeline设置为scroll，并配合scroll-timeline属性时，动画就会根据页面的滚动情况来控制播放。页面滚动时，浏览器会根据scroll-timeline中设定的偏移量，计算动画的进度，从而实现随着滚动平滑播放的效果。简单来说，就是把页面滚动的距离当作动画播放的“时间”，滚动的过程就像是在拨动动画的进度条，让动画与滚动完美同步。

三、手把手教你实现滚动驱动动画

接下来，我们通过一个实际的示例，来看看如何使用animation-timeline与scroll-timeline实现滚动驱动动画。我们将创建一个简单的页面，上面有几张图片，当用户滚动页面时，图片会逐个从底部向上滑入视线。

3.1 HTML结构

首先，创建一个基本的HTML结构，包含几张图片：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>滚动驱动动画示例</title>
</head>
<body>
  <!-- 用于展示动画的图片容器 -->
  <div class="image-container">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
  </div>
  <!-- 为了让页面有足够的滚动距离，添加一些占位内容 -->
  <div class="spacer"></div>
</body>
</html>

3.2 CSS样式

然后，编写CSS样式来实现动画效果：

/* 通用样式设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 图片容器样式 */
.image-container {
  width: 100%;
  text-align: center;
  padding: 50px 0;
}

/* 单个图片样式 */
.image-container img {
  width: 300px;
  height: 300px;
  margin: 0 20px;
  /* 初始状态下，将图片移出可视区域底部 */
  transform: translateY(100%);
  opacity: 0;
  /* 定义动画名称和持续时间 */
  animation: slide-in 2s ease;
  /* 将动画时间线设置为与页面滚动关联 */
  animation-timeline: scroll();
  /* 创建基于页面滚动的时间线，从滚动到页面高度的20%处开始，到80%处结束 */
  scroll-timeline: root scroll(20%, 80%);
}

/* 定义具体的动画关键帧 */
@keyframes slide-in {
  /* 动画开始时，图片从底部滑入并逐渐显示 */
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 用于增加页面滚动距离的占位元素样式 */
.spacer {
  height: 2000px;
  background-color: #f4f4f4;
}

在上述代码中，我们首先对图片进行了初始样式设置，将其从底部移出可视区域并设置为透明。然后，通过animation属性定义了一个名为slide-in的动画，持续时间为2秒，过渡效果为ease。接着，使用animation-timeline将动画时间线与页面滚动关联，scroll-timeline则精确设置了动画在页面滚动到20% - 80%高度时播放。最后，通过@keyframes规则定义了动画的具体变化过程，即从底部滑入并逐渐显示。

四、传统动画 vs 滚动驱动动画

为了更直观地感受animation-timeline与scroll-timeline结合的优势，我们将其与传统的基于JavaScript监听滚动事件的动画方式进行对比。

对比项	传统动画（JavaScript + CSS）	滚动驱动动画（animation-timeline + scroll-timeline）
代码复杂度	需要编写大量JavaScript代码监听滚动事件，计算元素位置，操作DOM添加/移除类名，代码量大且逻辑复杂。	仅需在CSS中设置相关属性，代码简洁明了，维护成本低。
性能表现	频繁的滚动事件监听和DOM操作可能导致性能下降，在页面元素较多时容易出现卡顿。	由浏览器原生支持，动画播放与滚动操作紧密结合，性能更优，运行流畅。
动画控制精度	精确控制动画触发时机和持续时间难度较大，容易出现动画衔接不自然的情况。	可以通过设置滚动偏移量，精确控制动画的开始和结束位置，动画效果更加平滑、自然。
兼容性	兼容性较好，但需要处理不同浏览器的兼容性问题。	目前部分老旧浏览器可能不支持，不过随着浏览器的更新，支持度在逐渐提高。

从对比表格中可以明显看出，使用animation-timeline与scroll-timeline实现的滚动驱动动画在代码复杂度、性能表现和动画控制精度上都具有显著优势，虽然在兼容性方面还存在一定的局限性，但随着Web技术的不断发展，这一问题也会逐渐得到解决。

五、面试回答方法

在前端面试中，如果被问到“讲解animation-timeline属性与scroll-timeline结合实现滚动驱动动画的原理，并通过示例说明”，我们可以这样回答：

面试官您好！简单来说，animation-timeline和scroll-timeline这两个属性结合起来，能让动画跟着页面滚动走，实现超酷的效果。

animation-timeline就像是动画的“时间表”，平时动画都是从页面加载完开始算时间，但这个属性可以让我们换个方式计时。当把它的值设成scroll时，动画就准备跟着滚动来走了。

scroll-timeline更直接，它专门用来设置动画和滚动的关系。我们可以告诉它，页面滚动到哪个位置动画开始，滚到哪里结束。比如说，我想让一个图片在页面滚到一半的时候开始从左边滑进来，滚到快到底的时候滑到位，用这个属性就能轻松做到。

举个例子，我做个页面，上面有几张图片。在CSS里，我先把图片藏到页面下面看不见的地方，然后给它一个从下往上滑进来的动画。接着，用animation-timeline: scroll();把动画和滚动关联起来，再用scroll-timeline: root scroll(20%, 80%);设定在页面滚动到20% - 80%的时候播放这个动画。这样，用户一滚动页面，图片就会按照我们设定的节奏，一个一个滑进来，特别自然。

和以前用JavaScript控制滚动动画比，这种方式代码少很多，浏览器处理起来也更轻松，性能更好，动画效果还更精准。虽然现在有些老浏览器可能不支持，但新的浏览器基本都没问题，是个特别实用的技术！

六、总结

通过本文的介绍，我们深入了解了animation-timeline与scroll-timeline这两个强大的CSS属性。它们的结合为前端工程师提供了一种全新的、高效的实现滚动驱动动画的方式，极大地简化了动画开发的流程，提升了动画效果的质量和性能。

在实际项目中，合理运用这两个属性，可以轻松打造出各种炫酷、自然的滚动交互效果，为用户带来更好的浏览体验。虽然目前在浏览器兼容性方面还存在一些挑战，但随着Web标准的不断推进和浏览器的更新迭代，相信它们会得到更广泛的应用。

七、扩展思考

多元素动画协同：在实际项目中，往往会有多个元素需要同时实现滚动驱动动画，并且它们之间可能存在不同的播放时机和顺序。如何更好地协调这些元素的动画，让整个页面的动画效果更加流畅、富有节奏感？例如，在一个多屏滚动的网页中，不同屏的元素动画如何无缝衔接？
动画与交互结合：除了单纯的滚动驱动动画，如何将动画与用户的其他交互行为（如点击、触摸等）结合起来，创造出更丰富、更有趣的交互体验？比如，当用户点击某个按钮时，触发一个基于滚动的动画效果，或者在触摸滑动过程中动态调整动画的播放。
性能优化：尽管animation-timeline与scroll-timeline在性能上有一定优势，但在复杂页面中，大量使用滚动驱动动画可能仍然会对性能产生影响。如何进一步优化动画性能，减少对页面加载和滚动流畅性的影响？例如，合理设置动画的持续时间、缓动函数，以及对动画元素进行性能优化等。

希望本文的内容能对你有所帮助，如果你在使用animation-timeline与scroll-timeline的过程中遇到任何问题，或者有更多有趣的应用案例，欢迎在评论区留言分享！让我们一起探索前端动画的更多可能性，打造出更精彩的Web页面！