M

MLOG

中文

CSS 滚动时间轴全面指南，一种强大的新型网页动画技术，可将动画直接链接到滚动位置。学习如何创建引人入胜的交互式用户体验。

CSS 滚动时间轴：基于滚动位置的动画

滚动驱动的动画正在彻底改变网页设计，提供超越传统静态布局的、引人入胜的交互式用户体验。CSS 滚动时间轴为创建这些动画提供了一种原生的浏览器解决方案，将动画进度直接与元素的滚动位置相关联。这为增强网络用户参与度和讲故事开辟了一个充满创意可能性的世界。

什么是 CSS 滚动时间轴？

CSS 滚动时间轴允许您根据指定滚动容器的滚动位置来控制 CSS 动画或过渡的进度。动画进度不再依赖于持续时间固定的传统时间基动画，而是直接与用户的滚动距离挂钩。这意味着动画会根据用户的滚动行为直接暂停、播放、倒带或快进，从而创造出更自然、更具交互性的体验。想象一下，一个进度条会随着您向下滚动页面而填充，或者元素在进入视口时淡入淡出——这些都是使用 CSS 滚动时间轴可以轻松实现的效果。

为何使用 CSS 滚动时间轴？

关键概念与属性

理解核心概念和 CSS 属性对于有效利用滚动时间轴至关重要：

1. 滚动时间轴 (Scroll Timeline)

scroll-timeline 属性定义了用作动画时间轴的滚动容器。您可以指定一个命名的时间轴（例如，--my-scroll-timeline）或使用预定义的值，如 auto（最近的祖先滚动容器）、none（无滚动时间轴）或 root（文档的视口）。

/* 定义一个命名的滚动时间轴 */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* 在动画中使用该命名的时间轴 */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. 动画时间轴 (Animation Timeline)

animation-timeline 属性将一个滚动时间轴分配给一个动画。此属性将动画的进度与指定滚动容器的滚动位置相关联。您还可以使用 view() 函数，它会根据元素与视口的相交情况创建一个时间轴。

/* 将动画链接到滚动时间轴 */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* 对基于视口的动画使用 view() */
.animated-element {
  animation-timeline: view();
}

3. 滚动偏移量 (Scroll Offsets)

滚动偏移量定义了滚动时间轴上与动画开始和结束相对应的起点和终点。这些偏移量允许您根据滚动位置精确控制动画的开始和停止时间。您可以使用诸如 cover、contain、entry、exit 等关键字以及数值（例如 100px、50%）来定义这些偏移量。

/* 当元素完全可见时播放动画 */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* 动画从顶部 100px 处开始，当底部距离视口底部 200px 时结束 */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. 滚动时间轴坐标轴 (Scroll Timeline Axis)

scroll-timeline-axis 属性指定了滚动时间轴沿其发展的坐标轴。它可以设置为 block（垂直滚动）、inline（水平滚动）、both（两个轴）或 auto（由浏览器决定）。使用 `view()` 时，建议明确指定坐标轴。

/* 定义滚动时间轴的坐标轴 */
.scroll-container {
  scroll-timeline-axis: y;
}

/* 配合 view() 使用 */
.animated-element {
  scroll-timeline-axis: block;
}

5. 动画范围 (Animation Range)

animation-range 属性定义了与动画开始 (0%) 和结束 (100%) 相对应的滚动偏移量（起点和终点）。这允许您将特定的滚动位置映射到动画的进度。

/* 将整个滚动范围映射到动画 */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* 在滚动范围的一半处开始动画 */
.animated-element {
  animation-range: 50% 100%;
}

/* 使用像素值 */
.animated-element {
  animation-range: 100px 500px;
}

实践示例与用例

让我们探讨一些如何使用 CSS 滚动时间轴创建引人入胜的动画的实践示例：

1. 进度条

滚动驱动动画的一个经典用例是进度条，它会随着用户向下滚动页面而填充。这为用户提供了关于他们已浏览内容进度的视觉反馈。

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... your content here ...</p>
</div>

这段代码在页面顶部创建了一个固定的进度条。随着用户向下滚动页面，fillProgressBar 动画会逐渐将进度条的宽度从 0% 增加到 100%。animation-timeline: view() 将动画与视口的滚动进度相关联，而 `animation-range` 则将滚动与视觉进度联系起来。

2. 图片淡入

您可以使用滚动时间轴为图片进入视口时创建微妙的淡入效果，增强内容的视觉吸引力。

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="Image">

这段代码最初会隐藏图片并将其定位在最终位置的稍下方。当图片滚动进入视图时，fadeIn 动画会逐渐增加其不透明度并将图片移动到其原始位置，从而创造出平滑的淡入效果。`animation-range` 指定动画在图片的顶部边缘进入视口 25% 时开始，并在底部边缘进入视口 75% 时完成。

3. 粘性元素

实现“粘性”效果——即元素在滚动期间固定在视口顶部——但具有更强的控制和过渡效果。想象一下，一个导航栏在用户向下滚动时平滑地变形为一个浓缩版本。

/*CSS*/
.sticky-container {
  height: 200px; /* 根据需要调整 */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* 根据需要调整范围 */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* 改变颜色以表示粘性状态 */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">My Sticky Element</div>
</div>

在此示例中，当元素进入视口顶部 20% 时，它会从 `position: absolute` 过渡到 `position: fixed`，从而创建平滑的“粘性”效果。调整 `animation-range` 和关键帧内的 CSS 属性以自定义行为。

4. 视差滚动效果

创建视差滚动效果，即当用户滚动时，不同层级的内容以不同速度移动，从而增加页面的深度和视觉趣味性。

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* 根据需要调整 */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* 调整以控制视差速度 */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* 调整以控制视差速度 */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

此示例创建了两个具有不同背景图片的图层。parallaxBg 和 parallaxFg 动画以不同的速度平移图层，从而产生视差效果。调整关键帧中的 translateY 值以控制每个图层的速度。

5. 文本揭示动画

当用户滚动经过某个特定点时，逐字揭示文本，以吸引注意力并增强内容的叙事性。

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">This text will be revealed as you scroll.</span>
</div>

此示例利用 `steps(1)` 时间函数逐字揭示文本。width: 0 最初隐藏了文本，而 textRevealAnimation 动画则逐渐增加宽度以揭示整个文本。调整 animation-range 来控制文本揭示动画的开始和结束时间。

浏览器兼容性与 Polyfill

CSS 滚动时间轴是一项相对较新的技术，浏览器支持仍在不断发展中。截至 2023 年末，像 Chrome 和 Edge 这样的主流浏览器提供了良好的支持。Firefox 和 Safari 正在积极实现该功能。在生产环境中实施滚动时间轴之前，检查当前的浏览器兼容性至关重要。您可以使用像 Can I use 这样的资源来验证支持状态。

对于原生不支持滚动时间轴的浏览器，您可以使用 polyfill 来提供类似的功能。polyfill 是一段 JavaScript 代码，它使用 JavaScript 来实现缺失的功能。有多种适用于 CSS 滚动时间轴的 polyfill 可供选择，让您即使在旧版浏览器中也能使用该功能。

可访问性考量

虽然滚动驱动的动画可以增强用户体验，但考虑可访问性至关重要，以确保您的网站对包括残障用户在内的所有人可用。

最佳实践与技巧

以下是有效使用 CSS 滚动时间轴的一些最佳实践和技巧：

动画设计的全球化考量

在为全球受众设计动画时，请牢记以下几点：

结论

CSS 滚动时间轴提供了一种强大而高效的方式来创建引人入胜的交互式网页动画。通过将动画进度与滚动位置相关联，您可以创造出更具动态性、响应性和用户友好性的体验。虽然浏览器支持仍在不断发展，但使用 CSS 滚动时间轴的好处——性能提升、声明式方法和增强的用户体验——使其成为现代 Web 开发人员的宝贵工具。在您试验滚动时间轴时，请记住优先考虑可访问性并考虑您的受众的全球背景，以创造真正包容和引人入胜的网络体验。

拥抱这项激动人心的新技术，为您的网页项目解锁一个充满创意可能性的世界。网页动画的未来已来，它由滚动驱动！