应用 CSS `view-timeline`：基于元素可见性驱动动画的关键帧

CSS `view-timeline`：让你的网页动起来，不靠鼠标，靠“眼神”！

想象一下，你辛辛苦苦写了一个网页，内容丰富，排版精美。但是，它就像一个安静的美男子，静静地等待着你的鼠标去“临幸”。直到用户滚动鼠标，它才勉强展示一点内容。这未免有点太被动了。

难道网页就不能主动一点，像一个热情的小伙伴，随着用户的目光移动，内容也跟着活泼起来吗？

答案是：当然可以！而且，CSS view-timeline 就是那个能让你的网页“眼神”好的秘密武器。

别慌，view-timeline 听起来很高大上，但其实它并没有那么可怕。 简单来说，它就是一个CSS属性，能够让你根据元素在视口中的可见程度，来驱动CSS动画。也就是说，当某个元素进入你的视线（或者部分进入），动画就开始播放；当它完全离开视线，动画就停止。

这就像给你的网页赋予了“感知”能力，让它能够根据用户的视线，做出相应的反应。想想就觉得很酷炫！

告别“懒癌”网页，迎接主动式动画时代！

以前，我们想要实现类似的动画效果，通常需要依赖 JavaScript。虽然JS很强大，但总感觉有点“杀鸡用牛刀”。而且，JS代码写多了，维护起来也比较麻烦。

现在有了 view-timeline，我们就可以用更简洁、更优雅的CSS代码，来实现同样的效果。这简直是前端开发者的福音啊！

那么，view-timeline 到底是怎么工作的呢？

别急，我们先来了解几个关键的概念：

视口（Viewport）： 这个大家都懂，就是你浏览器中可以看到的网页区域。
滚动容器（Scroll Container）： 就是可以滚动的元素，比如 body、div 等。 view-timeline 会监听这个滚动容器的滚动事件。
目标元素（Target Element）： 就是你想让它动起来的元素。 view-timeline 会根据这个元素在视口中的可见程度来驱动动画。
视图时间轴（View Timeline）： 这就是 view-timeline 属性本身，它定义了动画播放的时间轴，这个时间轴是基于目标元素在滚动容器中的可见程度来计算的。

好了，概念介绍完毕，我们来举个栗子！

假设我们有一个卡片，我们希望当它进入视口时，从透明度0缓缓过渡到透明度1，并且放大一点点。

<div class="card-container">
  <div class="card">
    <h2>这是一个卡片</h2>
    <p>卡片的内容...</p>
  </div>
</div>

<style>
.card-container {
  width: 300px;
  height: 200px;
  margin: 50px auto;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.card {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0; /* 初始透明度为0 */
  transform: scale(0.9); /* 初始缩放为0.9 */

  animation: card-entrance linear both; /* 应用动画 */
  animation-timeline: view(); /* 定义时间轴为 view-timeline */
  animation-range: entry 25% cover 75%; /* 定义动画范围 */
}

@keyframes card-entrance {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

这段代码做了什么呢？

基本样式: 我们先定义了卡片的容器和卡片的样式，让它看起来像一张卡片。
初始状态: 我们设置了卡片的初始透明度为0，缩放为0.9，这样它一开始是隐藏的，并且比正常大小小一点。
动画定义: 我们定义了一个名为 card-entrance 的关键帧动画，这个动画会让卡片从透明度0、缩放0.9，过渡到透明度1、缩放1。
animation-timeline: view();: 这句代码是关键！它告诉浏览器，这个动画的时间轴是基于 view-timeline 的。也就是说，动画的播放进度，是由卡片在视口中的可见程度来决定的。 view() 是 view() 函数的简写，它默认使用最近的滚动祖先元素作为滚动容器。你也可以显式指定滚动容器，比如 view(root) 表示使用根元素作为滚动容器。
animation-range: entry 25% cover 75%;: 这句代码定义了动画的范围。 entry 25% 表示当卡片进入视口25%时，动画开始播放。 cover 75% 表示当卡片覆盖视口75%时，动画播放结束。也就是说，卡片从进入视口25%到覆盖视口75%的这段时间内，动画会从0%播放到100%。

运行这段代码，你会发现，当你滚动页面，卡片进入视口时，它会缓缓地显示出来，并且放大一点点。 是不是很神奇？

animation-range 的秘密

animation-range 这个属性非常重要，它决定了动画何时开始和结束。它有两个值：

start: 定义动画开始的触发点。
end: 定义动画结束的触发点。

这两个值都可以使用以下关键字：

entry: 目标元素进入滚动容器的时刻。
exit: 目标元素离开滚动容器的时刻。
cover: 目标元素完全覆盖滚动容器的时刻。
contain: 目标元素完全包含在滚动容器内的时刻。

你也可以使用百分比来表示，比如 entry 25% 表示目标元素进入滚动容器25%时。

view-timeline-axis：控制动画的方向

默认情况下，view-timeline 会同时监听水平和垂直方向的滚动。但有时候，我们可能只想监听一个方向的滚动。这时候，就可以使用 view-timeline-axis 属性来指定监听的轴向。

view-timeline-axis: block; 只监听垂直方向的滚动。
view-timeline-axis: inline; 只监听水平方向的滚动。

更复杂的例子：让图片随着滚动逐渐变大

我们来一个更复杂的例子。假设我们有一张图片，我们希望当它进入视口时，逐渐变大，并且颜色逐渐变淡。

<div class="image-container">
  <img src="your-image.jpg" alt="图片">
</div>

<style>
.image-container {
  width: 500px;
  height: 300px;
  margin: 50px auto;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
  transform: scale(1); /* 初始大小 */
  filter: grayscale(100%); /* 初始颜色为黑白 */

  animation: image-zoom linear both;
  animation-timeline: view();
  animation-range: entry 50% cover 100%;
}

@keyframes image-zoom {
  0% {
    transform: scale(1);
    filter: grayscale(100%);
  }
  100% {
    transform: scale(1.2);
    filter: grayscale(0%);
  }
}
</style>

这段代码和之前的例子类似，只是我们修改了关键帧动画，让图片在滚动过程中逐渐变大，并且颜色逐渐从黑白变为彩色。

scroll-driven animations 的未来

view-timeline 只是 scroll-driven animations 的一部分。 scroll-driven animations 是一个更广泛的概念，它指的是所有基于滚动事件驱动的动画。

除了 view-timeline 之外，还有一些其他的相关属性，比如 scroll-timeline 和 scroll-offset。 scroll-timeline 可以让你创建一个基于特定滚动容器的滚动时间轴，而 scroll-offset 可以让你指定动画开始和结束的滚动偏移量。

这些属性的出现，让我们可以更灵活、更强大地控制基于滚动事件的动画。

view-timeline 的兼容性问题

虽然 view-timeline 很强大，但目前它的兼容性还不是很好。截至目前，只有 Chrome 和 Edge 浏览器完全支持它。 Firefox 和 Safari 还在开发中。

因此，在使用 view-timeline 时，我们需要注意兼容性问题。可以考虑使用一些 polyfill 或者渐进增强的方式，来保证在不支持 view-timeline 的浏览器中也能正常显示。

总结

CSS view-timeline 是一个非常强大的属性，它可以让你根据元素在视口中的可见程度来驱动CSS动画。它让你的网页更加生动活泼，能够主动地响应用户的视线。

虽然目前它的兼容性还不是很好，但相信随着浏览器的不断发展，它会越来越普及。

所以，赶紧学习 view-timeline，让你的网页动起来，不靠鼠标，靠“眼神”！

最后，给大家留个小作业：

尝试使用 view-timeline 来实现一个“视差滚动”效果。让不同的元素以不同的速度滚动，营造出一种立体的视觉效果。相信你一定能做出很酷炫的效果！

CSS view-timeline：让你的网页动起来，不靠鼠标，靠“眼神”！

发表回复 取消回复

CSS `view-timeline`：让你的网页动起来，不靠鼠标，靠“眼神”！

发表回复取消回复