大佬教程收集整理的这篇文章主要介绍了在循环中的纯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无限线性.
但是你还需要调整关键帧百分比,将它们除以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); } }
以上是大佬教程为你收集整理的在循环中的纯css3中依次动画元素全部内容,希望文章能够帮你解决在循环中的纯css3中依次动画元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。