在纯 css3 on loop 中按顺序动画元素

Question

我正在尝试在完整的 css3 动画中按顺序对元素进行动画处理。似乎非常直接的答案是使用动画延迟。但是我想要这个循环，任何想法如何使动画无限循环？

我在一个类似的问题上找到了这个fiddle。基本上这是相同的逻辑，但我只是希望它循环。

这是类似的 [问题] (https://stackoverflow.com/a/8294491/340888)

正在使用这个：

@-webkit-keyframes FadeIn { 
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}

.myClass img { float: left; margin: 20px; 
    -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }

编辑

为了清楚起见，我希望以顺序方式制作动画，比如在第一个动画之后，它动画第二个项目，然后是第三个......等等。我正在考虑制作大约 10 到 12 个元素的动画。所以他们会一个接一个地制作动画。

所以@Sonu Joshi 的回答不正确。

Answer 1

您需要使动画足够长，以便所有元素都有机会在循环再次开始之前进行动画处理。

在此示例中，您的第 4 个元素仅在 2 秒后开始动画。过渡本身将需要一秒钟，然后您可能需要稍作停顿，比如说再一秒钟，然后再重新激活第一个元素。所以总共是 4 秒。

所以你可能想要这样的东西：-webkit-animation: Fadein 4s infinite linear。

但您还需要调整关键帧的百分比，将它们除以 4，因为您仍然希望过渡本身只需 1 秒。

@-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(.1);}
  21.25% {opacity:1; -webkit-transform:scale(1.05);}
  25% {-webkit-transform:scale(1); }
}

Fiddle example