In the previous article "Several new CSS features you deserve to know in 2022 (Collection and Learning)", I briefly introduced several new CSS features. Today I will take you to understand one of them in depth. New feature (animation killer): @scroll-timeline, I hope it will be helpful to everyone!

In the CSS specification Scroll-linked Animations, an epoch-making CSS feature is introduced. That is -- The @scroll-timeline at-rule, which literally translates to Scrolling Timeline.

This article will take you through it all, from getting started to learning to use CSS @scroll-timeline. (Recommended learning: css video tutorial)

What is @scroll-timeline scrolling timeline?

What is @scroll-timeline What is the scrolling timeline?

@scroll-timeline You can set the start and end of an animation to be determined by the scrolling progress within the scroll container, not by time.

Means, We can define an animation effect, and the start and end of the animation can be controlled by scrolling the container.

Suggestion DEMO

Before systematically learning grammar, we use a DEMO to briefly understand its usage:

We first implement a simple font F Rotation animation :

<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);
    }
}

Normally, it is such a simple animation:

Next, we combine this animation with @scroll-timeline Combined, it needs to be placed in a scrollable container:

    <div id="g-box">F</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");
}

Here, we have implemented a scrollable container #g-content, Its height is 170vh, which is 1.7 times the height of the visual interface, and the #g-box container is placed at a height of 70vh from the top ：

The interesting thing is, the rotation animation we set will not start automatically. The animation will only start when we scroll down. The actual effect Gif:

CodePen Demo -- @scroll-timeline Demo

https://codepen.io/Chokcoco/pen/JjOZMaQ

Seeing this, everyone should be able to understand the role and meaning of @scroll-timeline. It gives CSS the ability to control the progress of animation based on the scrolling of the scroll bar! Amazing! !

@scroll-timeline syntax introduction

Next, let’s take a moment and take a brief look at the syntax of @scroll-timeline.

To use @scroll-timeline, the most important thing is to define a @scroll-timeline rule:

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

Among them:

• source：綁定觸發(fā)滾動動畫的滾動容器
  • source: auto：綁定到 Document，也就是全局 Windows 對象
  • source: selector("id-selector")，通過 selector()，內(nèi)置一個 #id 選擇器，選取一個可滾動容器
  • source: none：不指的滾動容器
• orientation：設(shè)定滾動時間線的方向
  • orientation: auto：默認為 vertical，也就是豎直方向的滾動
  • orientation: vertical：豎直方向的滾動
  • orientation: horizontal：水平方向的滾動
  • orientation: block：不太常用，使用沿塊軸的滾動位置，符合書寫模式和方向性
  • orientation: inline：不太常用，使用沿內(nèi)聯(lián)軸的滾動位置，符合書寫模式和方向性
• scroll-offsets：滾動時間線的核心，設(shè)定在滾動的什么階段，觸發(fā)動畫，可通過三種方式之一進行設(shè)置：
  • scroll-offsets: none 這意味著沒有 scroll-offset 指定。
  • 由逗號分隔的 length-percentage 值列表確定。每個值都映射到animation-duration。例如，如果 ananimation-duration 設(shè)置為 2s 且滾動偏移量為 0px, 30px, 100px，則在 1s 時，滾動偏移量將為 30px。
  • 第三種確定滾動偏移量的方法是使用元素偏移量。這意味著可以指定頁面內(nèi)的元素，其位置決定了滾動時間線以及要使用這些元素的哪個邊緣。指定元素是使用 selector() 函數(shù)完成的，該函數(shù)接收元素的 id。邊緣由關(guān)鍵字 start 或確定 end。可選的閾值的 0–1 可用于表示元素滾動中預(yù)期可見的百分比。

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

在設(shè)定了一個 @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 實現(xiàn)滾動進度指示器

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

該方法有些小小的瑕疵。其中一個就是當滾動距離太短的時候，進度條右側(cè)會有明顯的斜邊效果。

而有了 @scroll-timeline 之后，我們終于可以將滾動和動畫這兩個元素綁定起來，再實現(xià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、我們在頁面最上方，通過一個偽元素，實現(xiàn)一個占滿屏幕 100% 的 5px 高的進度條。正常而言是這樣：

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

完整的代碼，你可以戳這里：CodePen Demo - 使用 @scroll-timeline 實現(xiàn)滾動進度條

https://codepen.io/Chokcoco/pen/eYeKLMj

使用 scroll-offsets 精確控制動畫觸發(fā)時機

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

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

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

• 滾動過程中，從上方視野盲區(qū)，進入視野
• 滾動過程中，處于視野中
• 滾動過程中，從視野中，進入下方視野盲區(qū)

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

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

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

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

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

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

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

1、滾動動畫在元素從下方開始出現(xiàn)時開始，完全出現(xià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;
}

效果如下：

2、滾動動畫在元素從下方完全出現(xià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;
}
// ...

效果如下：

3、滾動動畫在元素滾動到上方即將離開屏幕后開始，完全離開屏幕后截止：

動畫運行范圍：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 的用法是靈活運用滾動時間線的關(guān)鍵，當然，在上面你還會看到 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

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

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

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

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

https://codepen.io/bramus/pen/bGwJVzg

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

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

https://codepen.io/Chokcoco/pen/QWOrPdM

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

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

https://codepen.io/Chokcoco/pen/wvPxbRm

@scroll-timeline 的實驗室特性與特性檢測

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

兼容性如下(2022-03-07):

在最新的 chrome、Edge、Opera 可以通過瀏覽器配置開啟該特性，Chrome 下開啟該特性需要：

• 瀏覽器 URL 框輸入 chrome://flags

• 開啟 #enable-experimental-web-platform-features

美酒雖好，但是離完全能用，瀏覽器大規(guī)模支持還需要等待一會，給時間一點時間吧！

特性檢測

基于目前的兼容性問題，我們可以通過瀏覽器的特性檢測 @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。

最后

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

本文到此結(jié)束，希望對你有幫助 :)

（學(xué)習(xí)視頻分享：web前端）

The above is the detailed content of Learn more about the new features of CSS animation: @scroll-timeline. For more information, please follow other related articles on the PHP Chinese website!