在 CSS 規(guī)范 Scroll-linked Animations[1] 中，推出了一個(gè)劃時(shí)代的 CSS 功能。也就是 -- The @scroll-timeline[2] at-rule，直譯過來就是滾動(dòng)時(shí)間線。

本文，就將帶大家一探究竟，從入門到學(xué)會(huì)使用 CSS @scroll-timeline。

何為 @scroll-timeline 滾動(dòng)時(shí)間線?

什么是 @scroll-timeline 滾動(dòng)時(shí)間線呢?

@scroll-timeline 能夠設(shè)定一個(gè)動(dòng)畫的開始和結(jié)束由滾動(dòng)容器內(nèi)的滾動(dòng)進(jìn)度決定，而不是由時(shí)間決定。

意思是，我們可以定義一個(gè)動(dòng)畫效果，該動(dòng)畫的開始和結(jié)束可以通過容器的滾動(dòng)來進(jìn)行控制。

示意 DEMO

再系統(tǒng)性學(xué)習(xí)語法之前，我們通過一個(gè) DEMO，簡(jiǎn)單了解一下它的用法：

我們首先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的字體 F 旋轉(zhuǎn)動(dòng)畫：

<div id="g-box">F</div>

#g-box {
    animation-name: rotate;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-easing-function: linear;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

正常而言，它是這樣一個(gè)簡(jiǎn)單的動(dòng)畫：

接下來，我們把這個(gè)動(dòng)畫和 @scroll-timeline 相結(jié)合，需要把它放置到一個(gè)可滾動(dòng)的容器中：

<div id="g-content">
    <div id="g-box">F</div>
</div>

#g-content {
    width: 300px;
    height: 170vh;
    background: #999;
}
#g-box {
    font-size: 150px;
    margin: 70vh auto 0;
    animation-name: rotate;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-easing-function: linear;
    animation-timeline: box-rotate;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
@scroll-timeline box-rotate {
    source: selector("#g-content");
}

這里，我們實(shí)現(xiàn)了一個(gè)可滾動(dòng)容器 #g-content，它的高度是 170vh，也就是可視界面高度的 1.7 倍，并且把 #g-box 容器放置在一個(gè)距離頂部 70vh 高度的地方：

有意思的來了，我們?cè)O(shè)置的旋轉(zhuǎn)動(dòng)畫不會(huì)自動(dòng)開始，只有當(dāng)我們向下滾動(dòng)的時(shí)候，動(dòng)畫才會(huì)開始進(jìn)行，實(shí)際效果 Gif：

CodePen Demo -- @scroll-timeline Demo[3]

看到這里，大家應(yīng)該能夠理解 @scroll-timeline 的作用及含義了，它賦予了 CSS 能夠基于滾動(dòng)條的滾動(dòng)去控制動(dòng)畫行進(jìn)的能力! Amazing!!

@scroll-timeline 語法介紹

接下來，我們先緩一緩，簡(jiǎn)單看一看 @scroll-timeline 的語法。

使用 @scroll-timeline，最核心的就是需要定義一個(gè) @scroll-timeline 規(guī)則：

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

其中：

source：綁定觸發(fā)滾動(dòng)動(dòng)畫的滾動(dòng)容器

• source: auto：綁定到 Document，也就是全局 Windows 對(duì)象
• source: selector("id-selector")，通過 selector()，內(nèi)置一個(gè) #id 選擇器，選取一個(gè)可滾動(dòng)容器
• source: none：不指的滾動(dòng)容器

orientation：設(shè)定滾動(dòng)時(shí)間線的方向

• orientation: auto：默認(rèn)為 vertical，也就是豎直方向的滾動(dòng)
• orientation: vertical：豎直方向的滾動(dòng)
• orientation: horizontal：水平方向的滾動(dòng)
• orientation: block：不太常用，使用沿塊軸的滾動(dòng)位置，符合書寫模式和方向性
• orientation: inline：不太常用，使用沿內(nèi)聯(lián)軸的滾動(dòng)位置，符合書寫模式和方向性

scroll-offsets：滾動(dòng)時(shí)間線的核心，設(shè)定在滾動(dòng)的什么階段，觸發(fā)動(dòng)畫，可通過三種方式之一進(jìn)行設(shè)置：

• scroll-offsets: none 這意味著沒有 scroll-offset 指定。
• 由逗號(hào)分隔的[4]值列表確定。每個(gè)值都映射到animation-duration[5]。例如，如果 ananimation-duration 設(shè)置為 2s 且滾動(dòng)偏移量為 0px, 30px, 100px，則在 1s 時(shí)，滾動(dòng)偏移量將為 30px。
• 第三種確定滾動(dòng)偏移量的方法是使用元素偏移量。這意味著可以指定頁面內(nèi)的元素，其位置決定了滾動(dòng)時(shí)間線以及要使用這些元素的哪個(gè)邊緣。指定元素是使用 selector() 函數(shù)完成的，該函數(shù)接收元素的 id。邊緣由關(guān)鍵字 start 或確定 end?？蛇x的閾值的 0–1 可用于表示元素滾動(dòng)中預(yù)期可見的百分比。

scroll-offsets 的理解會(huì)比較困難，我們稍后詳述。

在設(shè)定了一個(gè) @scroll-timeline 之后，我們只需要將它和動(dòng)畫綁定起來即可，通過 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 實(shí)現(xiàn)滾動(dòng)進(jìn)度指示器

之前在 不可思議的純 CSS 滾動(dòng)進(jìn)度條效果[6] 一文中，我們介紹了一種使用漸變實(shí)現(xiàn)的純 CSS 滾動(dòng)進(jìn)度指示器效果：

該方法有些小小的瑕疵。其中一個(gè)就是當(dāng)滾動(dòng)距離太短的時(shí)候，進(jìn)度條右側(cè)會(huì)有明顯的斜邊效果。

而有了 @scroll-timeline 之后，我們終于可以將滾動(dòng)和動(dòng)畫這兩個(gè)元素綁定起來，再實(shí)現(xiàn)滾動(dòng)進(jìn)度指示器，就已經(jīng)非常輕松了：

<div id="g-container">
    <p>...文本內(nèi)容...</p>
</div>

#g-container {
    width: 100vw;
}
#g-container::before {
    content: "";
    position: fixed;
    height: 5px;
    left: 0;
    top: 0;
    right: 0;
    background: #ffc107;
    animation-name: scale;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timeline: box-rotate;
    transform-origin: 0 50%;
}

@keyframes scale {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@scroll-timeline box-rotate {
    source: auto;
    orientation: vertical;
}

1.我們?cè)陧撁孀钌戏?，通過一個(gè)偽元素，實(shí)現(xiàn)一個(gè)占滿屏幕 100% 的 5px 高的進(jìn)度條。正常而言是這樣：

2.通過設(shè)定一個(gè) transform: scaleX(0) 到 transform: scaleX(1) 的動(dòng)畫，并且將它與 body 的滾動(dòng)相綁定，即可得到滾動(dòng)指示器，效果如下：

完整的代碼，你可以戳這里：CodePen Demo - 使用 @scroll-timeline 實(shí)現(xiàn)滾動(dòng)進(jìn)度條[7]

使用 scroll-offsets 精確控制動(dòng)畫觸發(fā)時(shí)機(jī)

大家可以再看看上面的 Gif 圖，都有一個(gè)問題，就是動(dòng)畫的開始時(shí)間都是從滾動(dòng)一開始就開始了，剛好在滾動(dòng)結(jié)束時(shí)結(jié)束。那么如果我希望動(dòng)畫在滾動(dòng)的特定階段觸發(fā)，那該怎么辦呢?

這里，就需要借助 scroll-offsets，去更加精確的控制我們的動(dòng)畫。

在滾動(dòng)過程中，我們可以將一個(gè)元素，劃分為 3 個(gè)區(qū)域：

• 滾動(dòng)過程中，從上方視野盲區(qū)，進(jìn)入視野
• 滾動(dòng)過程中，處于視野中
• 滾動(dòng)過程中，從視野中，進(jìn)入下方視野盲區(qū)

在這里，我們就可以得到兩個(gè)邊界，上方邊界，下方邊界：

而對(duì)于上下兩個(gè)邊界，又會(huì)有兩種狀態(tài)。以上邊界為例子，會(huì)有：

• 元素剛剛開始進(jìn)入可視區(qū)
• 元素完全進(jìn)入可視區(qū)

對(duì)于這兩種狀態(tài)，我們用 start 0 和 start 1 表示，同理，下方的邊界也可以用 end 0 和 end 1 表示：

這里的 0 和 1 實(shí)際表示的是，元素滾動(dòng)中預(yù)期可見的百分比。

有了這些狀態(tài)值，配合 scroll-offsets，我們就可以精確控制滾動(dòng)動(dòng)畫的觸發(fā)時(shí)間。

我們?cè)O(shè)定一個(gè)從左向右并且伴隨透明度變化的動(dòng)畫，的看看下面幾種情況：

滾動(dòng)動(dòng)畫在元素從下方開始出現(xiàn)時(shí)開始，完全出現(xiàn)后截止。

動(dòng)畫運(yùn)行范圍：end 0 --> end 1：

@keyframes move {
    0% {
        transform: translate(-100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
@scroll-timeline box-move {
    source: auto;
    orientation: "vertical";
    scroll-offsets: 
        selector(#g-box) end 0, 
        selector(#g-box) end 1;

    /* Legacy Descriptors Below: */
    start: selector(#g-box) end 0;
    end: selector(#g-box) end 1;
    time-range: 1s;
}
#g-box {
    animation-name: move;
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-timeline: box-move;
}

效果如下：

滾動(dòng)動(dòng)畫在元素從下方完全出現(xiàn)時(shí)開始，在滾動(dòng)到上方即將離開屏幕后截止：

動(dòng)畫運(yùn)行范圍：end 1 --> start 1：

// ...
@scroll-timeline box-move {
    source: auto;
    orientation: "vertical";
    scroll-offsets: 
        selector(#g-box) end 1, 
        selector(#g-box) start 1;

    /* Legacy Descriptors Below: */
    start: selector(#g-box) end 1;
    end: selector(#g-box) start 1;
    time-range: 1s;
}
// ...

效果如下：

滾動(dòng)動(dòng)畫在元素滾動(dòng)到上方即將離開屏幕后開始，完全離開屏幕后截止：

動(dòng)畫運(yùn)行范圍：start 1 --> start 0：

// ...
@scroll-timeline box-move {
    source: auto;
    orientation: "vertical";
    scroll-offsets: 
        selector(#g-box) start 1, 
        selector(#g-box) start 0;

    /* Legacy Descriptors Below: */
    start: selector(#g-box) start 1;
    end: selector(#g-box) start 0;
    time-range: 1s;
}
// ...

效果如下：

掌握 scroll-offsets 的用法是靈活運(yùn)用滾動(dòng)時(shí)間線的關(guān)鍵，當(dāng)然，在上面你還會(huì)看到 start: selector(#g-box) start 1 和 end: selector(#g-box) start 0 這種寫法，這是規(guī)范歷史遺留問題，最新的規(guī)范已經(jīng)使用了 scroll-offsets 去替代 start: 和 end: 的寫法。

把上述 3 種情況放在一起，再比較比較：

完整的代碼，你可以戳這里：CodePen Demo - @scroll-timeline Demo | element-based offset[8]

使用 @scroll-timeline 實(shí)現(xiàn)各類效果

在能夠掌握 @scroll-timeline 的各個(gè)語法之后，我們就可以開始使用它創(chuàng)造各種動(dòng)畫效果了。

譬如如下的，滾動(dòng)內(nèi)容不斷劃入：

代碼較長(zhǎng)，可以戳這里，來自 bramus 的 Codepen CodePen Demo -- Fly-in Contact List (CSS @scroll-timeline version)[9]

甚至可以結(jié)合 scroll-snap-type 制作一些全屏滾動(dòng)的大屏特效動(dòng)畫：

要知道，這在以前，是完全不可能利用純 CSS 實(shí)現(xiàn)的。完整的代碼你可以戳這里：CodePen Demo -- CSS Scroll-Timeline Split Screen Carousel[10]

簡(jiǎn)而言之，任何動(dòng)畫效果，如今，都可以和滾動(dòng)相結(jié)合起來，甚至乎是配合 SVG 元素也不例外，這里我還簡(jiǎn)單改造了一下之前的一個(gè) SVG 線條動(dòng)畫：

完整的代碼你可以戳這里：CodePen Demo -- SVG Text Line Effect | Scroll Timeline[11]

@scroll-timeline 的實(shí)驗(yàn)室特性與特性檢測(cè)

@scroll-timeline 雖好，目前仍處于實(shí)驗(yàn)室特性時(shí)間，Chrome 從 85 版本開始支持，但是默認(rèn)是關(guān)閉的。

開啟該特性需要：

1. 瀏覽器 URL 框輸入 chrome://flags
2. 開啟 #enable-experimental-web-platform-features

特性檢測(cè)

基于目前的兼容性問題，我們可以通過瀏覽器的特性檢測(cè) @supports 語法，來漸進(jìn)增強(qiáng)使用該功能。

特性檢測(cè)的語法也非常簡(jiǎn)單：

@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。

最后

目前關(guān)于 @scroll-timeline 的相關(guān)介紹還非常少，但是它確是能夠改變 CSS 動(dòng)畫的一個(gè)非常大的革新。隨著兼容性的逐漸普及，未來勢(shì)必會(huì)在 CSS 中占據(jù)一席之地。

參考資料

[1]Scroll-linked Animations: https://drafts.csswg.org/scroll-animations-1/

[2]@scroll-timeline: https://drafts.csswg.org/scroll-animations/#at-ruledef-scroll-timeline

[3]CodePen Demo -- @scroll-timeline Demo: https://codepen.io/Chokcoco/pen/JjOZMaQ

[4]: https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage

[5]animation-duration: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

[6]不可思議的純 CSS 滾動(dòng)進(jìn)度條效果: https://www.cnblogs.com/coco1s/p/10244168.html

[7]CodePen Demo - 使用 @scroll-timeline 實(shí)現(xiàn)滾動(dòng)進(jìn)度條: https://codepen.io/Chokcoco/pen/eYeKLMj

[8]CodePen Demo - @scroll-timeline Demo | element-based offset: https://codepen.io/Chokcoco/pen/qBVyqob

[9]CodePen Demo -- Fly-in Contact List (CSS @scroll-timeline version): https://codepen.io/bramus/pen/bGwJVzg

[10]CodePen Demo -- CSS Scroll-Timeline Split Screen Carousel: https://codepen.io/Chokcoco/pen/QWOrPdM

[11]CodePen Demo -- SVG Text Line Effect | Scroll Timeline: https://codepen.io/Chokcoco/pen/wvPxbRm