[Web前端之家]聊聊CSS 中的滚动进度动画

在此示例中，我们将实现一个常见功能：当用户滚动网页时，将简单的进度条动画化以从左向右缩放。因为我们想要将动画链接到根滚动条的进度，所以我们可以使用匿名滚动进度时间轴。

首先让我们定义动画本身。我们希望进度条从左向右缩放，因此我们将使用转换：

就像常规关键帧动画一样，我们可以同时应用多个滚动时间轴动画，例如更改进度条的颜色。

.progress {
  animation: scaleProgress auto linear, colorChange auto linear;
  animation-timeline: scroll(root);
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: lime;
  }
}

重复和反转动画

.progress {
  animation: bounce auto linear 6 alternate;
  animation-timeline: scroll(root);
}

@keyframes bounce {
  100% {
    transform: translateY(-50vh);
  }
}

定位非祖先滚动容器

.scroller {
  max-height: 300px;
  overflow: scroll;
  scroll-timeline: --scale-progress block;
}

我们可以使用该属性将要设置动画的元素链接到滚动时间轴animation-timeline。

/* Sibling of .scroller */
.progress {
  animation: scaleProgress auto linear;
  animation-timeline: --scale-progress;
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

对滚动容器的祖先进行动画处理

我们看一下代码：

/* Ancestor element: We want to scope the scroll timeline to include this element and its descendants */
body {
  timeline-scope: --scale-progress;

  /* Apply the animation */
  animation: colorChange auto linear forwards;
  animation-timeline: --scale-progress;
}

/* The scroll container on which we declare our timeline */
.scroller {
  max-height: 300px;
  overflow: scroll;
  scroll-timeline: --scale-progress block;
}

/* Apply the animation on the sibling as before */
.progress {
  animation: scaleProgress auto linear;
  animation-timeline: --scale-progress;
}

注意： timeline-scope目前仅在启用了实验性网络平台功能的 Chrome Canary 和 Chrome 116 中受支持。

在此演示中，我们在滚动时对多个元素进行动画处理：显示文本，同时框从左向右滑动和翻筋斗。为了简化代码并避免创建多个关键帧，我们对自定义属性进行动画处理并translateY使用三角函数计算值，所有主要浏览器的最新版本都支持三角函数。与转换属性不同，自定义属性在主线程上进行动画处理，这意味着如果您想对大量自定义属性进行动画处理，您的网站可能会遇到性能不佳的问题。