創建交錯動畫的不同方法

基本動畫很簡單：定義關鍵幀、命名動畫、應用於元素。但有時需要更複雜的技巧才能達到理想的動畫效果。例如，聲音均衡器可能對每個條形使用相同的動畫，但它們是交錯的，以產生獨立動畫的錯覺。

最近在構建儀表板時，希望其中一個小部件的項目以交錯動畫的方式顯示。

就像上面的聲音均衡器一樣，我開始使用:nth-child選擇器。我使用無序列表（<ul></ul> ）作為父容器，賦予它一個類，並使用:nth-child偽選擇器來通過animation-delay偏移每個列表項的動畫。

 .my-list li {
  animation: my-animation 300ms ease-out;
}

.my-list li:nth-child(1) {
  animation-delay: 100ms;
}

.my-list li:nth-child(2) {
  animation-delay: 200ms;
}

.my-list li:nth-child(3) {
  animation-delay: 300ms;
}

/* 以此類推*/

此技術確實可以很好地交錯項目，特別是如果您知道列表中在任何給定時間有多少項目。但是，當項目數量不可預測時（這正是我為儀表板構建的小部件的情況），這種方法就會失效。我確實不想每次列表中項目數量發生變化時都返回到這段代碼，所以我編寫了一個快速的Sass 循環，它最多可以處理50 個項目，並隨著每個項目的增加而增加動畫延遲：

 .my-list {
  li {
    animation: my-animation 300ms ease-out;

    @for $i from 1 through 50 {
      &:nth-child(#{$i}) {
        animation-delay: 100ms * $i;
      }
    }
  }
}

這應該可以解決問題！然而，感覺太笨拙了。當然，它不會給文件增加太多重量，但是您知道編譯後的CSS 將包含許多未使用的選擇器，例如nth-child(45) 。

一定有更好的方法。通常我會求助於JavaScript 來查找所有項目並添加延遲，但是……這次我花了一些時間探索一下是否可以用CSS 獨自完成。

CSS 計數器怎麼樣？

我首先想到的是將CSS 計數器與calc()函數結合使用：

 .my-list {
  counter-reset: my-counter;
}

.my-list li {
  counter-increment: my-counter;
  animation-delay: calc(counter(my-counter) * 100ms);
}

不幸的是，這行不通，因為規範說明計數器不能在calc()中使用：

calc()表達式的組件可以是字面值或attr()或calc()表達式。

事實證明，一些人喜歡這個想法，但它還沒有超出草案階段。

數據屬性怎麼樣？

在閱讀了規範的摘錄後，我了解到calc()可以使用attr() 。並且，根據CSS 值和單位規範：

在CSS3 中， attr()表達式可以返回許多不同類型的值

這讓我想到；也許數據屬性可以解決問題。

• Item 1
• Item 2
• Item 3
• Item 4

.my-list li {
  animation-delay: calc(attr(data-count) * 150ms);
}

但是我的希望破滅了，因為這個的瀏覽器支持非常糟糕！

此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持該功能。

桌面

移動/平板電腦

所以，回到繪圖板。

自定義屬性怎麼樣？

我的下一個想法是使用CSS 自定義屬性。它並不漂亮，但它有效了?

事實證明它也很靈活。例如，動畫可以反轉：

它還可以做一些完全隨機的事情並且同時動畫元素：

我們甚至可以更進一步，做一個對角線揮動：

瀏覽器支持並沒有那麼糟糕（戳戳Internet Explorer ）。

此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持該功能。

桌面

移動/平板電腦

CSS 的一個很棒的功能是它會忽略它不理解的東西，這要歸功於級聯。這意味著所有內容都將一起動畫到視圖中。如果這不是您的風格，您可以添加一個功能查詢來覆蓋默認動畫：

 .my-list li {
  animation: fallback-animation;
}

@supports (--variables) {
  .my-list li {
    animation: fancy-animation;
    animation-delay: calc(var(--animation-order) * 100ms);
  }
}

原生CSS 萬歲

我越停下來問自己是否需要JavaScript，就越驚訝於CSS 本身可以做什麼。當然，如果CSS 計數器可以在calc()函數中使用，那將是一個非常優雅的解決方案。但就目前而言，內聯自定義屬性提供了一種強大而靈活的方法來解決此問題。

以上是創建交錯動畫的不同方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！