CSS控制多個div按順序滾動的方法

在CSS中，我們可以使用動畫（animation）來實現(xiàn)多個div按順序滾動的效果，這需要為每個div設(shè)置一個***的動畫名稱，并在動畫中使用百分比（%）來表示每個div滾動的順序，下面是一個簡單的示例：

HTML代碼：

<div class="scroll-container">
  <div class="scroll-item" style="background-color: red;"></div>
  <div class="scroll-item" style="background-color: orange;"></div>
  <div class="scroll-item" style="background-color: yellow;"></div>
  <div class="scroll-item" style="background-color: green;"></div>
  <div class="scroll-item" style="background-color: blue;"></div>
  <div class="scroll-item" style="background-color: purple;"></div>
  <div class="scroll-item" style="background-color: pink;"></div>
  <div class="scroll-item" style="background-color: brown;"></div>
  <div class="scroll-item" style="background-color: gray;"></div>
  <div class="scroll-item" style="background-color: navy;"></div>
  <div class="scroll-item" style="background-color: maroon;"></div>
  <div class="scroll-item" style="background-color: olive;"></div>
  <div class="scroll-item" style="background-color: aqua;"></div>
  <div class="scroll-item" style="background-color: teal;"></div>
  <div class="scroll-item" style="background-color: purple;"></div>
  <div class="scroll-item" style="background-color: gold;"></div>
  <div class="scroll-item" style="background-color: lime;"></div>
  <div class="scroll-item" style="background-color: orange;"></div>
  <div class="scroll-item" style="background-color: navy;"></div>
  <div class="scroll-item" style="background-color: maroon;"></div>
  <div class="scroll-item" style="background-color: olive;"></div>
  <div class="scroll-item" style="background-color: aqua;"></div>
  <div class="scroll-item" style="background-color: teal;"></div>
  <div class="scroll-item" style="background-color: gold;"></div>
  <div class="scroll-item" style="background-color: lime;"></div>
  <div class="scroll-item" style="background-color: orange;"></div>
  <div class="scroll-item" style="background-color: navy;"></div>
  <div class="scroll-item" style="background-color: maroon;"></div>
  <div class="scroll-item" style="background-color: olive;"></div>
  <div class="scroll-item" style="background-color: aqua;"></div>
  <div class="scroll-item" style="background-color: teal;"></div>
  <div class="scroll-item" style="background-color: gold;"></div>
  <div class="scroll-item" style="background-color: lime;"></div>
  <div class="scroll-item" style="background-color: orange;"></div>
  <div class="scroll-item" style="background-color: navy;"></div>
  <div class="scroll-item" style="background-color: maroon;"></div>
  <div class="scroll-item" style="background-color: olive;"></div>
  <div class="scroll-item" style="background-color: aqua;"></div>
  <div class="scroll-item" style="background-color: teal;"></div>
  <div class="scroll-item" style="background-color: gold;"></div>
  <div class="scroll-item" style="background-color: lime;"></div>
</div>

CSS代碼：

.scroll-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.scroll-item {
  width: 100%;
  height: 50px;
}