前言

最近接到一个做网站官网的需求，官网的页面元素需要有一些动画效果，来增加页面的活力。很多网站的官网都有一个共同的特点，就是滚动页面的时候，页面上的元素会有一些出场动画效果，比如元素的移动、旋转、缩放、透明度变化等等，这些动画效果都是通过滚动页面来驱动的，这种方式可以让页面看起来更加的生动，也可以让用户更加的有参与感，这种方式也是一种很好的用户体验。

动画效果

设计小姐姐在提供动画效果示例的时候，让我参考github的官网，github的官网的动画效果是这样的：

可以看到页面在滚动到这个模块的时候，这个模块的标题、内容和左侧的进度条都有动画效果，其中标题和内容是从左侧滑动进来的，而且有一个透明度的变化，进度条是从上向下增加高度的，这样的动画效果看起来很酷炫，而且也很有层次感。

实现思路

我们可以看到，这个动画效果是由滚动页面来驱动的，当页面滚动到这个模块的时候，这个模块的标题、内容和左侧的进度条才会有动画效果。

说到滚动驱动动画，自然想到了比较新的css属性 view-timeline，这个属性可以让我们在滚动到某个元素时，根据元素和视口的相对位置来控制动画的进度，这个属性的使用方法可以参考这里。

接下来，我们来用 view-timeline 来实现这个动画效果。

定义我们需要的元素,如下图所示：

整块区域添加class section,标题部分元素 class 为section-title,描述部分为section-des,进度条为section-progress。

定义动画效果

侧滑的动画效果：

css 复制代码

@keyframes slideInLeft {
  from {
    transform: translateX(-15px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

进度条的动画效果：

css 复制代码

@keyframes progress {
  from {
    transform-origin: top;
    transform: scaleY(0);
  }
  to {
    transform-origin: top;
    transform: scaleY(100%);
  }
}

给 section 元素添加 view-timeline 属性

css 复制代码

.section {
  view-timeline: --sectionReveal;
}

给标题、描述和进度条添加对应的动画效果

css 复制代码

.section-title {
    animation-timeline: --sectionReveal;
    animation-name: slideInLeft;
    animation-range: entry 40% entry 60%;
    animation-fill-mode: both;
  }
  .section-des {
    animation-timeline: --sectionReveal;
    animation-name: slideInLeft;
    animation-range: entry 50% entry 70%;
    animation-fill-mode: both;
  }
  .section-progress {
    animation-timeline: --sectionReveal;
    animation-name: progress;
    animation-range: entry 50% entry 70%;
    animation-fill-mode: both;
  }

在上面的代码中，我们指定了动画的时间轴 --sectionReveal，然后给标题、描述和进度条添加了对应的动画效果，这样当页面滚动到这个模块的时候，这个模块的标题、描述和进度条就会有动画效果了。

其中值得注意的是 animation-range 这个属性，我们可以通过这个属性指定动画的开始时间和结束时间，比如 animation-range: entry 50% entry 70%;指定了动画开始时机为：section 元素进入视口的 50% 时刻，动画结束时机为：section 元素进入视口的 70% 时刻。可以通过指定不同的开始时机，让动画有层次感。

最后看看效果：

是不是和github 官网的效果差不多呢

最后

view-timeline 这个属性还是比较新的，浏览器的支持度不是特别高，所以在实际项目中使用的时候，还需要考虑兼容性的问题。那么不用这种方式，又该如何实现这个类似的效果呢？

我是viewer,下篇文章里，介绍使用 intersectionObserver + Tailwind CSS 来实现这个动画效果。欢迎点赞，收藏，评论。

基于view-timeline 实现滚动驱动动画

前言

动画效果

实现思路

最后