十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编给大家分享一下如何解决css中animate不循环的问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联-专业网站定制、快速模板网站建设、高性价比扶风网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式扶风网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖扶风地区。费用合理售后完善,十载实体公司更值得信赖。
css中可利用animation-iteration-count属性来解决animate不循环问题,该属性定义动画的播放次数,只需要给动画设置“animation-iteration-count:infinite;”样式即可实现无限次循环。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css中animate不循环,可利用animation-iteration-count属性来解决。
例如:
只正反旋转溢出,没有循环实现旋转,这要怎么做?简单,就利用animation-iteration-count属性来解决。
div { width: 100px; height: 100px; background: pink; margin: 100px; animation: mymove 5s; -webkit-animation: mymove 5s; /* Safari and Chrome */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;/* Safari and Chrome */ }
说明:
使用animation-iteration-count属性定义动画的播放次数。语法:
animation-iteration-count: value;
值 | 描述 |
---|---|
n | 一个数字,定义应该播放多少次动画 |
infinite | 指定动画应该播放无限次(永远) |
看完了这篇文章,相信你对“如何解决css中animate不循环的问题”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!