css中＠scroll-timeline_基于滚动条的滚动去控制动画行进的能力

Web开发者时常会碰到使用滚动来触发某些元素的动画效果，比如说，页面滚动条滚动到某个位置，标题固定在顶部；页面顶部展示你页面进度（滚动指示器）；还是一些我们所说的视差滚动效果等。

往实现这些效果，大都借助JavaScript来实现，可以通过dom事件查看滚动位置，并根据该位置更改元素的样式。如果可以的话，最好使用 IntersectionObserver。

不过，现在有一个关于这方面的css草案，即 Scroll-linked Animations。也就是说，在未来，我们可以直接使用CSS的 @scroll-timeline 属性来实现前面提到的一些动画效果。

@scroll-timeline = @scroll-timeline <timeline-name> { <declaration-list> }

@scroll-timeline 能够设定一个动画的开始和结束由滚动容器内的滚动进度决定，而不是由时间决定。意思是，我们可以定义一个动画效果，该动画的开始和结束可以通过容器的滚动来进行控制。

@scroll-timeline 语法介绍

接下来，我们先缓一缓，简单看一看 @scroll-timeline 的语法。

使用 @scroll-timeline，最核心的就是需要定义一个 @scroll-timeline 规则：

@scroll-timeline moveTimeline {
  source: selector("#g-content");
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}

其中：

• source：绑定触发滚动动画的滚动容器

  • source: auto：绑定到 Document，也就是全局 Windows 对象

  • source: selector("id-selector")，通过 selector()，内置一个 #id 选择器，选取一个可滚动容器

  • source: none：不指的滚动容器

• orientation：设定滚动时间线的方向

  • orientation: auto：默认为 vertical，也就是竖直方向的滚动

  • orientation: vertical：竖直方向的滚动

  • orientation: horizontal：水平方向的滚动

  • orientation: block：不太常用，使用沿块轴的滚动位置，符合书写模式和方向性

  • orientation: inline：不太常用，使用沿内联轴的滚动位置，符合书写模式和方向性

• scroll-offsets：滚动时间线的核心，设定在滚动的什么阶段，触发动画，可通过三种方式之一进行设置：

  • scroll-offsets: none 这意味着没有 scroll-offset 指定。

  • 由逗号分隔的值列表确定。每个值都映射到animation-duration。例如，如果 ananimation-duration 设置为 2s 且滚动偏移量为 0px, 30px, 100px，则在 1s 时，滚动偏移量将为 30px。

  • 第三种确定滚动偏移量的方法是使用元素偏移量。这意味着可以指定页面内的元素，其位置决定了滚动时间线以及要使用这些元素的哪个边缘。指定元素是使用 selector() 函数完成的，该函数接收元素的 id。边缘由关键字 start 或确定 end。可选的阈值的 0–1 可用于表示元素滚动中预期可见的百分比。

scroll-offsets 的理解会比较困难，我们稍后详述。

在设定了一个 @scroll-timeline 之后，我们只需要将它和动画绑定起来即可，通过 animation-timeline：

@scroll-timeline moveTimeline {
  source: selector("#g-content");
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}
div {
    animation-name: move;
    animation-duration: 3s;
    animation-timeline: moveTimeline;
}
@keyframes move{
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}

@scroll-timeline 的实验室特性与特性检测

@scroll-timeline 虽好，目前仍处于实验室特性时间，在最新的 chrome、Edge、Opera 可以通过浏览器配置开启该特性，Chrome 下开启该特性需要：

浏览器 URL 框输入 chrome://flags
开启 #enable-experimental-web-platform-features

特性检测

基于目前的兼容性问题，我们可以通过浏览器的特性检测 @supports 语法，来渐进增强使用该功能。

特性检测的语法也非常简单：

@supports (animation-timeline: works) {
    @scroll-timeline list-item-1 {
 source: selector(#list-view);
 start: selector(#list-item-1) end 0;
 end: selector(#list-item-1) end 1;
        scroll-offsets:
            selector(#list-item-1) end 0,
            selector(#list-item-1) end 1
        ;
 time-range: 1s;
    }
    // ...
}

通过 @supports (animation-timeline: works) {} 可以判断浏览器是否支持 @scroll-timeline。

学习更多技能

请点击下方公众号