我正在尝试在完整的 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 的回答是不正确的。
最佳答案
您需要使动画足够长,以便在循环再次开始之前所有元素都有机会进行动画处理。
在此示例中,您的第 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); }
}
关于css - 在纯 css3 循环中按顺序为元素设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16231359/