51. CSS3 animation-iteration-count属性设置动画播放次数
目录
animation-iteration-count
属性主要用来定义动画的播放次数。
语法规则:
animation-iteration-count: infinite | <number> [, infinite | <number>]*
- 其值通常为整数,但也可以使用带有小数的数字,其默认值为 1,这意味着动画将从开始到结束只播放一次。
- 如果取值为
infinite
,动画将会无限次的播放。
举例:
通过animation-iteration-count
属性让动画 move 只播放 5 次,代码设置为:
animation-iteration-count:5;
注意:Chrome 或 Safari 浏览器,需要加入-webkit-
前缀!
实例演示:
让动画 move 无限次数的播放。
HTML 代码:
<div><span></span></div>
CSS 代码:
@keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:.1s; animation-iteration-count:infinite; }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 51. CSS3 animation-iteration-count属性设置动画播放次数
码云笔记 » 51. CSS3 animation-iteration-count属性设置动画播放次数