51. CSS3 animation

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196539.html

1. 语法规则：
• 举例：
2. 实例演示：

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;
}

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/