Question

我想知道css是否会在有延迟的元素上使用相同的关键动画。例如，我有一个具有相同类的元素列表，并且对于每个元素，它使用关键动画，但每个元素的延迟为1秒，因此它们不会同时播放，而是一个接一个播放。如果你能在CSS中做到这一点，有人可以告诉我如何在jsFiddle中这样做并留言，谢谢KDM

Answer 1

只需在CSS中调用具有不同延迟的动画

，就可以非常简单地在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

如果你不能为每个元素指定一个不同的类，那么你只想使用nth-child selctors。

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!

一个接一个地分离HTML元素上的关键动画

2 个答案: