在CSS3中,我们可以使用animation-iteration-count属性来定义动画的播放次数。

语法:

animation-iteration-count: 取值;

说明:

animation-iteration-count属性取值有两种:一种是“正整数”;另外一种是“infinite”。当取值是n(正整数)时,表示动画播放n次;当取值为infinite时,表示动画播放无数次,也就是循环播放。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> @keyframes mytranslate { 0%{} 50%{transform:translateX(160px);} 100%{} } #ball { width:40px; height:40px; border-radius:20px; background-color:red; animation-name:mytranslate; animation-timing-function:linear; animation-duration:2s; animation-iteration-count:infinite; /*循环播放*/ } #container { display:inline-block; width:200px; border:1px solid silver; } </style> </head> <body> <div id="container"> <div id="ball"></div> </div> </body> </html>

浏览器预览效果如下图所示。

分析:

这里定义animation-iteration-count属性值为infinite。当打开页面时动画会自动播放,并且会无限循环播放。

这里留个问题让小伙伴们思考一下:大家试着把transform:translateX(160px);这一句代码放到100%{}中,看看实际效果如何?

animation-name:mytranslate; animation-timing-function:linear; animation-duration:2s; animation-iteration-count:infinite; /*循环播放*/

在实际开发中,我们很少会使用动画效果的完整形式,都是采用下面这种简写形式:

animation:mytranslate linear 2s infinite;