CSS 滾動驅動動畫終于正式支持了

作者：XboxYan 2023-07-24 09:11:43

在最新的Chrome 115中，令人無比期待的CSS 滾動驅動動畫(CSS scroll-driven animations)[1]終于正式支持了~有了它，幾乎以前任何需要JS監聽滾動的交互都可以純 CSS 實現了，就是這么強大，一起了解一下吧！

溫馨提示：文章略長，建議收藏后反復查閱

一、快速入門 CSS 滾動驅動動畫

直接介紹 API 可能不太感興趣，這里先通過一個最直觀的例子感受一下。

下面是一個頁面進度指示器，進度隨著頁面的滾動而變化。

頁面很簡單，很多內容和一個進度條。

<div class="progress"></div>
...很多內容

進度條是fixed定位。

.progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background-color: #F44336;
  transform-origin: 0 50%;
}

然后給這個進度條添加一個動畫，表示進度從0到100%。

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

接著給這個進度條綁定動畫。

.progress{
  animation: grow-progress 3s linear;
}

刷新頁面，可以看到進度條在3s內從0增長到了100%。

顯然這種動畫沒什么意義，我們需要在滾動時才觸發，并且滾動多少，動畫就播放多少。

注意：動畫時長不能為0，因為為0表示動畫不執行，所以必須寫上一個任意非零時間，或者直接為auto。

最后，加上「最核心」的一段，也就是今天的主角animation-timeline。

.progress{
  /*...*/
  animation-timeline: scroll();
}

這樣進度條就乖乖的跟隨頁面滾動而變化了（注意Chrome 115+）。

完整代碼可以訪問：

CSS scroll-driven-animations (juejin.cn)[2]
CSS scroll-driven-animations-back (codepen.io)[3]

是不是非常簡單？是不是非常神奇？如果你感興趣，可以接著往下看。

二、CSS 滾動驅動動畫

大家可能知道，傳統 JS 監聽滾動有一些問題，如下：

現代瀏覽器在單獨的進程上執行滾動，因此只能異步傳遞滾動事件。
由于是異步傳遞，因此主線程動畫容易出現卡頓

因此，為了解決滾動卡頓的問題，CSS 滾動驅動動畫應運而生。那么，什么是 CSS 滾動驅動動畫？

默認情況下，動畫是「隨著時間的流逝」而播放的。

「CSS 滾動驅動動畫」指的是將「動畫的執行過程由頁面滾動」進行接管，也就是這種情況下，「動畫只會跟隨頁面滾動的變化而變化」，也就是滾動多少，動畫就執行多少，「時間不再起作用」。

如何改變動畫的時間線呢？那就需要用到這個核心概念了：animation-timeline[4]，表示「動畫時間線」（或者叫時間軸），用于控制 CSS 動畫進度的時間線，是必不可少的一個屬性。

默認值是auto，也是就傳統的時間線。下面是它一些關鍵詞。

/* 關鍵詞 */
animation-timeline: none;
animation-timeline: auto;
/* 命名時間線 */
animation-timeline: --timeline_name;

/* 滾動時間線 */
animation-timeline: scroll();
animation-timeline: scroll(scroller axis);

/* 視圖時間線 */
animation-timeline: view();
animation-timeline: view(axis inset);

是不是有點混亂？不要慌，實際滾動場景千千萬，這里可以分為兩大類：一類是「滾動進度時間線」，也就是上面的關鍵詞scroll()，還有一類是「視圖進度時間線」，也就是關鍵詞view()。

兩者形式對應兩種不同的應用場景，這是什么意思呢？下面一一介紹。

三. CSS 滾動進度時間線

「滾動進度時間線（scroll progress timeline）」。表示頁面或者容器滾動，「將滾動進度映射到動畫進度上」。起始滾動位置代表 0% 進度，結束滾動位置代表 100% 進度，下面是一個可視化演示

https://scroll-driven-animations.style/tools/scroll-timeline/progress/。

在上面的進度條例子中，我們用到的就是scroll progress timeline，因為我們監聽的就是頁面的滾動。

animation-timeline: scroll();

這里的scroll()是一個簡寫，可以傳遞兩個參數，分別是<scroller>和<axis>。

<scroller>表示滾動容器，支持以下幾個關鍵值

nearest：使用最近的祖先滾動容器*（默認）*
root：使用文檔視口作為滾動容器。
self：使用元素本身作為滾動容器。

<axios>表示滾動方向，支持以下幾個關鍵值

block：滾動容器的塊級軸方向*（默認）*。
inline：滾動容器內聯軸方向。
y：滾動容器沿 y 軸方向。
x：滾動容器沿 x 軸方向。

/* 無參數 */
animation-timeline: scroll();

/* 設置滾動容器 */
animation-timeline: scroll(nearest); /* 默認 */
animation-timeline: scroll(root);
animation-timeline: scroll(self);

/* 設置滾動方向 */
animation-timeline: scroll(block); /* 默認 */
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);

/* 同時設置 */
animation-timeline: scroll(block nearest); /* 默認 */
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);

需要注意的是，這里語法容錯性比較強，沒有順序要求，會自動識別。

因此，如果需要監聽橫向滾動，可以這樣。

animation-timeline: scroll(inline);

不知大家發現沒，前面的滾動容器只有三個關鍵詞，并不能通過#id方式任意指定滾動容器，真的能滿足所有需求嗎？

當然不行！有時候結構稍微復雜一點，自動查找就不適用了，并且這里的「最近祖先滾動容器還受到絕對定位的影響」，因此，我們還需要手動去指定滾動容器。

官方的解決方式是「創建一個帶有名稱的時間線」，具體做法是，在「滾動容器」上添加一個屬性scroll-timeline-name[5]，這個屬性值必須以--開頭，就像 CSS 變量一樣，還可以通過scroll-timeline-axis[6]設置滾動方向，此時的animation-timeline就不用默認的scroll()了，而是改用前面設置的變量，示意如下：

@keyframes animate-it { … }

/*滾動容器*/
.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

這里的scroll-timeline-axis和scroll-timeline-name還可以簡寫成一個屬性scroll-timeline。

scroll-timeline-name: --my-scroller;
scroll-timeline-axis: inline;
/**可簡寫為**/
scroll-timeline: --my-scroller inline;

下面來看一個橫向滾動的例子，剛好可以把上面的幾個新概念都用上。

布局還是類似，只是放在了一個可以橫向滾動的容器中。

<main>
  <div class="progress"></div>
  ...很多內容...
</main>

給main設置橫向滾動，.progress設置fixed定位，還有動畫和上個例子一樣。

main{
  display: flex;
  overflow: scroll;
}
.progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background-color: #F44336;
  transform-origin: 0 50%;
  animation:grow-progress 3s linear;
}
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

由于這里main才是滾動容器，并不是頁面，而.progress是fixed定位，如果直接用scroll(nearest)獲取到的就是頁面根容器，并不是main，所以這里需要用命名scroll-timeline，實現如下：

main{
  /**/
  scroll-timeline: --scrollcontainer inline;
}
.progress{
  /**/
  animation-timeline: --scrollcontainer;
}

這樣就可以將橫向滾動進度一一映射到動畫上了，而且不受結構限制，非常自由。

完整代碼可以查看：

CSS scroll-driven-animations-inline (juejin.cn)[7]
CSS scroll-driven-animations-inline (codepen.io)[8]

四、CSS 視圖進度時間線

「視圖進度時間線（view progress timeline）」。這個名字有些難以理解，其實表示的是一個元素出現在頁面視野范圍內的進度，也就是關注的是元素自身位置。元素剛剛出現之前代表 0%進度，元素完全離開之后代表 100% 進度，下面是一個可視化演示：

https://scroll-driven-animations.style/tools/view-timeline/progress/。

這個概念非常像JS中的Intersection_Observer_API[9]，也就「交叉觀察者」，可以「監測到元素在可視區」的情況，因此，在這種場景中，無需關注滾動容器是哪個，只用處理自身就行了。

和前面的scroll progress time語法類似，也有一個快捷語法。

animation-timeline: view()

由于無需關注滾動容器，所以它的參數也不一樣，分別是<axios>和<inset>。

<axios>表示滾動方向，支持以下幾個關鍵值

block：滾動容器的塊級軸方向*（默認）*。
inline：滾動容器內聯軸方向。
y：滾動容器沿 y 軸方向。
x：滾動容器沿 x 軸方向。

<inset>表示調整元素的視區范圍，有點類似scroll-padding，支持兩個值，表示開始和結束兩個范圍。

animation-timeline: view(auto); /* 默認值 */
animation-timeline: view(20%);
animation-timeline: view(200px);
animation-timeline: view(20% 40%);
animation-timeline: view(20% 200px);
animation-timeline: view(100px 200px);
animation-timeline: view(auto 200px);

這里的<inset>還可以用view-timeline-inset[10]單獨來表示，不過需要注意的是，這種用法要使用命名的view progress time，如下：

scroll-timeline: --my-scroller block;
view-timeline-inset: 20% 200px;
animation-timeline: --my-scroller;

按照我的經驗，view progress time中使用命名的情況比較少，因為無需知道滾動容器，因此推薦用view()。

下面來看一個例子，有一個列表。

<div>歡</div>
<div>迎</div>
<div>關</div>
<div>注</div>
<div>前</div>
<div>端</div>
<div>偵</div>
...

簡單修飾后，效果如下：

現在，我們添加一個淡入和縮放的動畫。

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

然后，通過animation-time綁定在每個元素上，因為我們想做一個元素進入的動畫，所以要用到view progress timeline。

div{
  /**/
  animation: appear 1s linear both;
  animation-timeline: view();
}

可以得到這樣的效果：

效果是出來了，不過好像有點太過了，太夸張了，可以看到，「每個元素在滾動出現到離開的過程中都完整的執行了我們定義的動畫」。那么，有沒有辦法讓這個范圍變小一點呢？默認的范圍如下：

當然也是可以的，這里就需要用到view的第二個參數<inset>了，比如設置40% 0表示調整視區范圍，相當于將滾動容器上邊距減少了 40%，當滾動到視區上面40%的時候就完成了動畫（默認是滾動到0%，也就是完全離開的時候）。

div{
  /**/
  animation-timeline: view(40% 0);
}

還可以更加激進一點，設置成100%，相當于元素一旦完全進入，動畫就執行完成了，這樣元素出現動畫會更加和諧。

div{
  /**/
  animation-timeline: view(100% 0);
}

此時的動畫范圍就更小了，如下：

效果如下，是不是感覺沒那么夸張了呢？

完整代碼可以查看：

CSS scroll-driven-animations-view (juejin.cn)[11]
CSS scroll-driven-animations-view (codepen.io)[12]

五、CSS 動畫范圍區間

默認情況下，動畫會根據滾動區間范圍一一映射，就比如第一個滾動指示器的例子，滾動多少，指示器的進度就走多少。

但有時候，我們并不需要完整的區間，比如這個例子，右下角的返回頂部按鈕。

像這種情況下，我們其實「只需要前面滾動一定距離」就可以讓返回按鈕完全出現了，對應關系應該是這樣。

那么，如何截取一定的滾動區間呢？這就要涉及一個新的屬性，叫做animation-range[13]，也就是“動畫范圍”。

這里也要分兩種場景，也就是前面提到的「滾動進度時間線」和「視圖進度時間線」。

1、滾動進度時間線

首先來看scroll()場景，由于只是滾動容器的監聽，因此比較簡單，直接設置范圍就行了。

animation-range: normal; /* 等價于 normal normal */
animation-range: 20%; /* 等價于 20% normal */
animation-range: 100px; /* 等價于 100px normal */

比如上面這個返回頂部的例子，動畫其實很簡單，就是一個向上的位移動畫。

@keyframes back-progress {
  from { transform: translateY(150%); }
  to { transform: translateY(0%); }
}

如果僅僅添加一個滾動時間軸。

.back{
  /**/
  animation: back-progress 1s linear forwards;
  animation-timeline: scroll();
}

那么，這個返回按鈕就像滾動進度條那樣，慢慢的出來，直到滾動到最底部才完全出來，效果如下：

這時只需要在[0, 固定距離]的范圍內出現就好了，表示只在這個區間范圍內觸發動畫，關鍵代碼如下：

.back{
  /**/
  animation: back-progress 1s linear forwards;
  animation-timeline: scroll();
  animation-range: 0 100px;
}

這樣就實現了滾動100px時自動出現的返回頂部按鈕，100px后按鈕會一直顯示。

完整代碼可以查看：

CSS scroll-driven-animations-back (juejin.cn)[14]
CSS scroll-driven-animations-back (codepen.io)[15]

還有一個頭部吸頂的例子，原理也是類似的，如下：

頭部是一個高度和字號不斷變小的動畫，然后需要設置一下animation-range，關鍵實現如下：

@keyframes header {
  to { 
    height: 60px;
    font-size: 30px;
  }
}
.header{
  /**/
  animation: header 1s linear forwards;
  animation-timeline: scroll();
  animation-range: 0 calc(100vh - 60px);
}

完整代碼可以查看：

CSS scroll-driven-animations-header (juejin.cn)[16]
CSS scroll-driven-animations-header (codepen.io)[17]

2、視圖進度時間線

再來看看view()場景。由于涉及到元素和可視區域的交叉，情況稍微復雜一些，如下：

animation-range: cover; /* 等價于 cover 0% cover 100% */
animation-range: contain; /* 等價于 contain 0% contain 100% */
animation-range: cover 20%; /* 等價于 cover 20% cover 100% */
animation-range: contain 100px; /* 等價于 contain 100px cover 100% */


animation-range: normal 25%;
animation-range: 25% normal;
animation-range: 25% 50%;
animation-range: entry exit; /* 等價于 entry 0% exit 100% */
animation-range: cover cover 200px; /* 等價于 cover 0% cover 200px */
animation-range: entry 10% exit; /* 等價于 entry 10% exit 100% */
animation-range: 10% exit 90%;
animation-range: entry 10% 90%;

有以下關鍵詞

「cover」：元素首次開始進入滾動容器可見范圍（0%）到完全離開的過程（100% ），也就是元素只需要和可視范圍有交集（默認）。
「contain」：元素完全進入滾動容器可見范圍（0%）到剛好要離開的過程（100% ），也就是元素必須完全在可見范圍才會觸發。
「entry」：元素進入滾動容器可見范圍的過程，剛進入是 0%，完全進入是 100%。
「exit」：元素離開滾動容器可見范圍的過程，剛離開是 0%，完全離開是 100%。
「entry-crossing」：和「entry」比較類似，暫時沒有發現明顯差異。
「exit-crossing」：和「exit」比較類似，暫時沒有發現明顯差異。

下面做了一個示意圖，表示各自的范圍區間。

如果還是不太清楚，可以用下面這個工具去對比各自的差異。

https://scroll-driven-animations.style/tools/view-timeline/progress。

比如前面的列表進入時的動畫，之前是用view(100% 0)實現的，大家有沒有發現，這個效果其實和entry的示意效果一樣的？

如果用animation-range就很好理解了，這里需要進入動畫，所以可以直接用entry。

div{
  animation: appear 1s linear forwords;
  animation-timeline: view();
  animation-range: entry; /*只在進入過程中生效*/
}

同樣可以實現相同的效果。

除此之外還可以同時設置進入和離開兩種動畫，這就需要定義兩個動畫，然后分別給兩個動畫定義動畫區間，關鍵實現如下：

div{
  animation: appear 1s linear forwards, 
            disappear 1s linear forwards;
  animation-timeline: view();
  animation-range: entry,exit; /*進入過程執行appear，離開過程執行disappear*/
}

/*出現動畫*/
@keyframes appear {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
/*離開*/
@keyframes disappear {
  100% {
    opacity: 0;
    transform: scaleX(0);
  }

  0% {
    opacity: 1;
    transform: scaleX(1);
  }
}

這樣就得到一個進入和離開均存在動畫的滾動列表。

完整代碼可以查看：

CSS scroll-driven-animations-range (juejin.cn)[18]
CSS scroll-driven-animations-range (codepen.io)

另外，還可以將animation-range合并到同一個動畫中，在關鍵幀前面加上entry這些關鍵詞，這樣就無需指定animation-range中了，示意代碼如下：

div{
  animation: animate-in-and-out 1s linear forwards;
  animation-timeline: view();
}

@keyframes animate-in-and-out {
  entry 0% {
    opacity: 0;
    transform: scaleX(0);
  }

  entry 100% {
    opacity: 1;
    transform: scaleX(1);
  }
  exit 100% {
    opacity: 0;
    transform: scaleX(0);
  }

  exit 0% {
    opacity: 1;
    transform: scaleX(1);
  }
}

六、更多有趣的案例

除了以上一些案例外，CSS 滾動驅動動畫還能做更多有趣的事情，這里推薦一個網站。

https://scroll-driven-animations.style/

比如這個 Cover Flow 效果：

參見：https://scroll-driven-animations.style/demos/cover-flow/css/。

還有下面的卡片堆疊效果：

參見：https://scroll-driven-animations.style/demos/stacking-cards/css/。

還有其他的例子就不展示了，大家可以自行體驗。

七、用一張圖總結一下

總的來說，CSS 滾動驅動動畫為以后的交互帶來了無限可能，下面用一張圖總結一下。

參考資料：

[1]CSS_scroll-driven_animations： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations。

[2]CSS scroll-driven-animations (juejin.cn)： https://code.juejin.cn/pen/7258614059845566521。

[3]CSS scroll-driven-animations-back (codepen.io)： https://codepen.io/xboxyan/pen/abQjwLa。

[4]animation-timeline： https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline。

[5]scroll-timeline-name： https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-name。

[6]scroll-timeline-axis： https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-axis。

[7]CSS scroll-driven-animations-inline (juejin.cn)： https://code.juejin.cn/pen/7258615967712804925。

[8]CSS scroll-driven-animations-inline (codepen.io)： https://codepen.io/xboxyan/pen/dyQjRQx。

[9]Intersection_Observer_API： https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API。

[10]view-timeline-inset： https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-inset。

[11]CSS scroll-driven-animations-view (juejin.cn)： https://code.juejin.cn/pen/7258616829306732604。

[12]CSS scroll-driven-animations-view (codepen.io)： https://codepen.io/xboxyan/pen/WNYKOPO。

[13]animation-range： https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range。

[14]CSS scroll-driven-animations-back (juejin.cn)： https://code.juejin.cn/pen/7258613645440417849。

[15]CSS scroll-driven-animations-back (codepen.io)： https://codepen.io/xboxyan/pen/PoxBjVz。

[16]CSS scroll-driven-animations-header (juejin.cn)： https://code.juejin.cn/pen/7258894357275607077。

[17]CSS scroll-driven-animations-header (codepen.io)： https://codepen.io/xboxyan/pen/qBQyYjE。

[18]CSS scroll-driven-animations-range (juejin.cn)： https://code.juejin.cn/pen/7258632665178308666。

責任編輯：姜華來源：前端偵探

CSS 滾動驅動動畫

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

CSS 滾動驅動動畫終于正式支持了

一、快速入門 CSS 滾動驅動動畫

二、CSS 滾動驅動動畫

三. CSS 滾動進度時間線

四、CSS 視圖進度時間線

五、CSS 動畫范圍區間

1、滾動進度時間線

2、視圖進度時間線

六、更多有趣的案例

七、用一張圖總結一下