亚洲+综合+欧美,亚洲深深色噜噜狠狠网站

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

正常而言，它是這樣一個簡單的動畫：

深入了解CSS動畫新功能：@scroll-timeline

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


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

這裡，我們實作了一個可滾動容器#g-content，它的高度是170vh，也就是可視界面高度的1.7 倍，並且把#g-box 容器放置在一個距離頂部70vh 高度的地方：

深入了解CSS動畫新功能：@scroll-timeline

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

深入了解CSS動畫新功能：@scroll-timeline

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

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

@scroll-timeline 文法介紹

接下來，我們先緩一緩，簡單看一看 @scroll-timeline 的文法。

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

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

其中：

source：綁定觸發(fā)滾動動畫的滾動容器
- source: auto：綁定到 Document，也就是全局 Windows 對象
- source: selector("id-selector")，通過 selector()，內(nèi)置一個 #id 選擇器，選取一個可滾動容器
- source: none：不指的滾動容器
orientation：設(shè)定滾動時間線的方向
- orientation: auto：默認(rèn)為 vertical，也就是豎直方向的滾動
- orientation: vertical：豎直方向的滾動
- orientation: horizontal：水平方向的滾動
- orientation: block：不太常用，使用沿塊軸的滾動位置，符合書寫模式和方向性
- orientation: inline：不太常用，使用沿內(nèi)聯(lián)軸的滾動位置，符合書寫模式和方向性
scroll-offsets：滾動時間線的核心，設(shè)定在滾動的什么階段，觸發(fā)動畫，可通過三種方式之一進(jìn)行設(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?？蛇x的閾值的 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)滾動進(jìn)度指示器

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

深入了解CSS動畫新功能：@scroll-timeline

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

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

深入了解CSS動畫新功能：@scroll-timeline

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

深入了解CSS動畫新功能：@scroll-timeline

完整的代碼，你可以戳這里：CodePen Demo - 使用 @scroll-timeline 實現(xiàn)滾動進(jìn)度條
https://codepen.io/Chokcoco/pen/eYeKLMj

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

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

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

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

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

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

深入了解CSS動畫新功能：@scroll-timeline

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

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

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

深入了解CSS動畫新功能：@scroll-timeline

這里的 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;
}

效果如下：

深入了解CSS動畫新功能：@scroll-timeline

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;
}
// ...

效果如下：

深入了解CSS動畫新功能：@scroll-timeline

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;
}
// ...

效果如下：