9-6 CSS3中设置动画播放次数
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3中设置动画播放次数

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-前缀！

任务

在CSS编辑器的第41行输入正确代码，让动画move无限次数的播放。

注意：如果您使用的是Chrome或Safari浏览器，请使用-webkit-前缀！

index.htmlstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8">
  5. <title>变形与动画</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head> 
  8. <body>
  9. <div><span></span></div>
  10.  
  11. </body>
  12. </html>
  1. @keyframes move {
  2.   0%{
  3.     transform: translate(0);
  4.   }
  5.   15%{
  6.     transform: translate(100px,180px);
  7.   }
  8.   30%{
  9.     transform: translate(150px,0);
  10.   }
  11.   45%{
  12.     transform: translate(250px,180px);
  13.   }
  14.   60%{
  15.     transform:translate(300px,0);
  16.   }
  17.   75%{
  18.     transform: translate(450px,180px);
  19.   }
  20.   100%{
  21.     transfrom: translate(480px,0);
  22.   }
  23. }
  24.  
  25. div {
  26.   width: 500px;
  27.   height: 200px;
  28.   border: 1px solid red;
  29.   margin: 20px auto;
  30. }
  31. div span {
  32.   display: inline-block;
  33.   width: 20px;
  34.   height: 20px;
  35.   background: green;
  36.   border-radius: 100%;
  37.   animation-name:move;
  38.   animation-duration: 10s;
  39.   animation-timing-function:ease;
  40.   animation-delay:.1s;
  41.   ?:infinite;
  42. }
下一节