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

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

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

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

 .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)然，它不會(huì)給文件增加太多重量，但是您知道編譯後的CSS 將包含許多未使用的選擇器，例如nth-child(45) 。

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

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

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

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

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

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

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

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

數(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);
}

但是我的希望破滅了，因?yàn)檫@個(gè)的瀏覽器支持非常糟糕！

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

桌面

移動(dòng)/平板電腦

所以，回到繪圖板。

自定義屬性怎麼樣？

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

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

它還可以做一些完全隨機(jī)的事情並且同時(shí)動(dòng)畫元素：

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

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

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

桌面

移動(dòng)/平板電腦

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

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

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

原生CSS 萬(wàn)歲

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

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