CSS 飛舞線條加載中動畫效果 #web前端

天給大家帶來了四個線條進行環繞的加載中的效果，我放大了給你們看看，但是你們可以看到，每個線條的旋轉動作是一個圓形。

下面是代碼區域，我使用的是vivo試圖容器，里面包含了第二個試圖容器，里面有五個vivo試圖容器，前面這四個代表著四根線條，線條下面是文字。主要的是css代碼區域，我使用的是開發工具是s plus x，是開發uniap的。

先給大家解釋一下代碼部分。

·首先是第一個vivo式圖容器，使用彈性布局集中對齊，頂部距離進行相反像素的設置。

·第二個又是圖中簽，也是進行絕對定位，集中對齊相對定位等。

·下面就是h三，文字是白色，大家可以看到知道。

·這是第一個線條，設置了一個寬度、高度、邊框、透明度、圓角、絕對定位。主要是第一根線條的動作是個動畫，進行了應用旋轉動畫，無限循環。邊框顏色為了粉色，大家可以看到粉色，因為為什么這么細？大家可以看到因為在防木人狀態下設置了一個一的邊框，線條的寬度是一，所以是細的。

·第二個就是第一個線條動畫，它引用是哪個動畫？就是下面設置一個旋轉角度和結束的旋轉角度形成一個圓形，從五十到一百一，再從五十到四百七，大家可以看一下形成這么個動畫。

·下面第二根線條、第三根線條、第四根線條基本上都是一樣的動畫，所以大家只需要把第一根線條的寫法知道就行了。

·下面的其實位置的變化而已和顏色大家可以看到，其他地方基本上沒有太多的區別，就是美國旋轉的角度是不一樣的。第一個旋轉角度是四百七，第二個是三百八，然后是九十，然后是六百三，就這不一樣，價格方都是一樣的。

感興趣的同學可以找我嘮嗑進行獲取元代碼，進行二十四的編寫也可以，也可以自己去手動去學。

喜歡的可以點贊收藏一下，本期就講到這。

用戶正在瀏覽網站網頁時，為了更好的用戶體驗，經常會使用 加載中 文字或者動畫來表示正在 加載數據 或 執行某項操作。而使用動畫不僅能夠吸引用戶的注意力，同時也能夠傳達信息"系統正在工作中"，需要一些時間來完成任務。本文將詳細介紹如何通過 CSS 創建一個 加載中 動畫效果。

HTML 結構

首先是HTML代碼，定義了一個類名container的<div>容器：

在這個容器里面包含了一些加載器.loader，每個加載器都具有不同的旋轉角度自定義屬性--r(1~4)，而每個加載器里面有20個<span>元素，并且也都具有不同的旋轉角度自定義屬性--r(1~20)。
后面會通過CSS設置不同的旋轉角度屬性--r和旋轉角度子屬性--i，創建多個加載器，并且每個加載器都具有不同的動畫表現。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation</title>

  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container">
    <div class="loader" style="--r: 1">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 2">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 3">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 4">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>
  </div>
</body>

</html>

CSS 樣式

接下來看CSS代碼，重置全局樣式后，給.container元素定義了水平垂直居中布局，然后使用filter樣式屬性來應用色相旋轉(hue-rotate)濾鏡，將背景色調整為90度的色相。因此，子元素的任何顏色同樣會添加濾鏡。

首先，每個.loader元素通過transform: rotate()屬性根據--r值設置旋轉角度 (45deg * 1/2/3/4 = 45/90/135/180deg)。
其次，每個span元素使用定位設置初始位置在左側，以及通過transform: rotate()屬性根據--i值設置旋轉角度 (18deg * 1~20 = 18 ~ 360deg)。
然后，每個span::before定義固定的寬度和高度及背景顏色。使用box-shadow屬性定義了一個由多個投影組成的陰影效果，產生一種立體感。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  background-color: #042104;
  filter: hue-rotate(90deg);

  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  position: relative;
  transform: rotate(calc(var(--r) * 45deg));
}

.loader span {
  position: absolute;
  top: 0;
  left: -200px;

  width: 200px;
  height: 2px;
  transform-origin: right;
  transform: rotate(calc(var(--i) * 18deg));
}

.loader span::before {
  content: "";
  display: block;

  width: 15px;
  height: 15px;
  background-color: #00ff0a;
  border-radius: 15px;
  box-shadow: 0 0 10px #00ff0a, 
              0 0 20px #00ff0a, 
              0 0 40px #00ff0a, 
              0 0 60px #00ff0a, 
              0 0 80px #00ff0a, 0 0 100px #00ff0a;
  animation: animate 5s linear infinite;
  animation-delay: calc(-0.5s * var(--i));
}
@keyframes animate {
  0% {
    transform: translateX(200px) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(0) scale(0);
    opacity: 1;
  }
}



@media screen and (max-width: 576px) {
  .container .loader {
    scale: .6;
  }  
}

此外，通過animation屬性和@keyframes規則，定義了名為animate的關鍵幀動畫。該動畫在5秒內線性地進行，無限循環播放。動畫的每個關鍵幀設置了不同的變換效果，包括 平移、縮放和透明度 變化。根據時間的進展，加載器的形狀和位置會發生變化，從而創造出動態的效果。

最后

通過本篇文章的詳細介紹，相信能夠幫助你更好地使用CSS來創建一個loading加載中動畫，從而理解掌握和應用這個效果。你可以根據自己的需求調整大小、顏色和持續時間等參數，創建符合你網頁風格的加載中動畫。加載中動畫不僅能夠提供視覺上的反饋，告訴用戶系統正在工作中，還能夠改善用戶體驗，減少長時間等待的焦慮感。

作者：掘一
鏈接：https://juejin.cn/post/7296404570949173298

最新的Chrome 115中，令人無比期待的CSS 滾動驅動動畫(CSS scroll-driven animations)終于正式支持了~有了它，幾乎以前任何需要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-back (codepen.io)

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

二、CSS 滾動驅動動畫

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

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

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

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

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

如何改變動畫的時間線呢？那就需要用到這個核心概念了：animation-timeline，表示動畫時間線（或者叫時間軸），用于控制 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% 進度，下面是一個可視化演示

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

cssanimation-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，這個屬性值必須以--開頭，就像 CSS 變量一樣，還可以通過scroll-timeline-axis設置滾動方向，此時的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 (codepen.io)

四、CSS 視圖進度時間線

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

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

和前面的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單獨來表示，不過需要注意的是，這種用法要使用命名的view progress time，如下

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

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

<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 (codepen.io)

五、CSS 動畫范圍區間

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

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

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

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

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

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 (codepen.io)

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

頭部是一個高度和字號不斷變小的動畫，然后需要設置一下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 (codepen.io)

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比較類似，暫時沒有發現明顯差異

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

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

比如前面的列表進入時的動畫，之前是用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 (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 滾動驅動動畫還能做更多有趣的事情，這里推薦一個網站

比如這個 Cover Flow 效果

還有下面的卡片堆疊效果

七、用一張圖總結一下

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

原文鏈接：https://juejin.cn/post/7259026189904805944

在線咨詢

上一篇：HTML制作跟隨鼠標的可愛萌鯨魚，快來看看吧~
下一篇：探秘網頁性能提升利器之CSS硬件加速

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 飛舞線條加載中動畫效果 #web前端

HTML 結構

CSS 樣式

相關

最后

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

二、CSS 滾動驅動動畫

三. CSS 滾動進度時間線

四、CSS 視圖進度時間線

五、CSS 動畫范圍區間

1. 滾動進度時間線

2. 視圖進度時間線

六、更多有趣的案例

七、用一張圖總結一下

您的項目需求