在循环中的纯css3中依次动画元素

Question

我试图在完整的css3动画中按顺序动画元素.似乎非常直截了当的答案是使用动画延迟.但是我想循环,任何想法如何让动画无限循环？

我在类似的问题上找到了这个小提琴.基本上这是相同的逻辑,但我只是想它循环.

这是类似的[问题](/sf/answers/580614401/)

使用这个:

@-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); }
}

小提琴的例子