一个接一个地在 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 个子项 selctor。

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，即引用要运行的动画关键帧。所有其他属性都具有默认值，以防未指定。在您的情况下，只需在您想要的任何元素上使用该混合，但为每个元素提供不同的延迟值。

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

现场演示在这里！