html - 将 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 个子选择器。

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，它指的是你要运行的动画关键帧。如果未指定，所有其他属性都有默认值。在你的情况下，只需在你想要的任何元素上使用该混合，但给每个元素一个不同的延迟值。