0

我想知道在 css 中是否可以在有延迟的元素上使用相同的关键动画。例如，我有一个具有相同类的元素列表，每个元素都使用关键动画，但每个元素都有 1 秒的延迟，因此它们不会同时播放，而是一个接一个地播放。如果您可以在 css 中执行此操作，请有人告诉我如何在 jsFiddle 中执行此操作并留言，感谢 KDM

4

2 回答 2

1

如果你想按顺序为你的元素设置动画，你可以使用这样的东西：

@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

现场演示在这里！

于 2013-10-17T11:57:46.823 回答
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

如果您不能为每个想要具有不同延迟的元素指定不同的类，则只能使用 nth-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，但给每个元素一个不同的延迟值。

于 2013-10-17T10:09:24.847 回答