51. CSS3 animation-iteration-count属性设置动画播放次数

animation-iteration-count属性主要用来定义动画的播放次数。

语法规则:

animation-iteration-count: infinite | <number> [, infinite | <number>]*
  1. 其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。
  2. 如果取值为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;
}

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 51. CSS3 animation-iteration-count属性设置动画播放次数

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们