一個接一個地在HTML元素上單獨的鍵動畫

Question

我想知道是否有在CSS中使用相同的關鍵動畫元素有延遲。例如，我有一個具有相同類的元素列表，並且每個元素都使用關鍵動畫，但每個元素的延遲時間爲1秒，因此它們不會同時播放，而是一個接一個地播放。如果你能在CSS中做到這一點可能有人告訴我如何做到這一點的的jsfiddle請和留言，感謝從KDM

Answer 1

您可以通過只調用了不同的延遲動畫做到這一點很簡單的CSS

* { animation: $name $duration $timing-function; } // all elements you want get animation called 
.element { animation-delay: 100ms; } // set the delay here 
.other-element { animation-delay: 200ms; } // set it again for different delays 

如果你不能爲每一個你想要有不同延遲的元素指定一個不同的類，那麼只需要使用n-child選擇器。

nth-child(odd) { animation-delay: 100ms; } 
nth-child(even) { animation-delay: 200ms; } 

您還可以在SASS/Less中使用mixin執行此操作，我使用不同的屬性調用動畫。

@mixin animation($name, $duration: 1000ms, $iterations: infinite, $timing-function: ease, $delay: 0ms) { 
    -webkit-animation: $name $duration $iterations $timing-function $delay; 
    -moz-animation: $name $duration $iterations $timing-function $delay; 
    -o-animation: $name $duration $iterations $timing-function $delay; 
    animation: $name $duration $iterations $timing-function $delay; 
} 

必須指定$ name，它指的是要運行的動畫關鍵幀。所有其他屬性都有默認值，以防未指定。在你的情況下，只要使用該mixin在你想要的任何元素，但給每個不同的延遲值。

Answer 2

如果你想在動畫序列的元素，你可以使用這樣的事情：

@mixin sequenceAnimate($animationName, $elements: 1, $animationDuration: 1s, $animationDelay: 1s)  
    @for $i from 1 through $elements 
    &:nth-of-type(#{$i}) 
     -webkit-animation-name: $animationName 
     -webkit-animation-duration: $animationDuration 
     -webkit-animation-delay: $animationDelay * $i 

Live demo here!