css动画循环间的延时执行该怎么弄

CSS3 animation动画，循环间的延时执行该怎么弄？

1、@keyframes规则。from{属性：值;} to{属性：值;}。

2cf5e0fe9925bc31f789d49a51df8db1ca1370d8?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg

2、0%{属性：值;} 100%{属性：值;}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。

8718367adab44aed316c6ae6bc1c8701a18bfb96?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg

3、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。

060828381f30e9249416493343086e061d95f706?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg

4、规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。

cc11728b4710b91210e322fcccfdfc0392452296?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg

5、播放次数：animation-iteration-count：次数；永久播放的值取infinite。

78310a55b319ebc4bb1ea29b8d26cffc1e171649?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg

6、动画速度曲线：animation-timing-function：变化类型；变化类型有：linear 匀速；ease-in 开始慢；ease-out 结束慢；ease 动画有一个缓慢的开始，然后快，结束慢。

3bf33a87e950352aa969f10a5c43fbf2b2118bac?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg

扩展资料

animation 属性是一个简写属性，用于设置六个动画属性：

1、animation-name

规定需要绑定到选择器的 keyframe 名称。

2、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

3、animation-timing-function

规定动画的速度曲线。

4、animation-delay

规定在动画开始之前的延迟。

5、animation-iteration-count

规定动画应该播放的次数。

6、animation-direction

规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

0 条评论