我正在尝试在完整的 css3 动画中按顺序对元素进行动画处理。似乎非常直接的答案是使用动画延迟。但是我想要这个循环,任何想法如何使动画无限循环?
我在类似的问题上发现了这个小提琴。基本上这是相同的逻辑,但我只是希望它循环。
这是类似的[问题](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 的回答是不正确的。