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

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

就像上面的聲音均衡器一樣，我開始使用: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;
}

/* 以此類推*/

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

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

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

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

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

CSS 計數(shù)器怎麼樣？

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

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

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

不幸的是，這行不通，因為規(guī)範(fàn)說明計數(shù)器不能在calc()中使用：

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

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

數(shù)據(jù)屬性怎麼樣？

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

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

這讓我想到；也許數(shù)據(jù)屬性可以解決問題。

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

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

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

此瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，其中包含更多詳細(xì)信息。數(shù)字表示瀏覽器在該版本及更高版本中支持該功能。

桌面

移動/平板電腦

所以，回到繪圖板。

自定義屬性怎麼樣？

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

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

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

我們甚至可以更進(jìn)一步，做一個對角線揮動：

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

此瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，其中包含更多詳細(xì)信息。數(shù)字表示瀏覽器在該版本及更高版本中支持該功能。

桌面

移動/平板電腦

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

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

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

原生CSS 萬歲

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

以上是創(chuàng)建交錯動畫的不同方法的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！