您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 animation-iteration-count

2018-7-27 21:54| 作者: admin| 查看: 883| 评论: 0|来自: 蚂蚁部落

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

更多关于animation动画可以参阅CSS3 animation一章节。

语法结构:

[CSS] 纯文本查看 复制代码
animation-iteration-count:infinite | <number> [ , infinite | <number> ]*

参数解析:

(1).infinite:规定动画可以无限循环。

(2).number:明确指定动画循环的次数。

特别说明:如果提供多个属性值,以逗号进行分隔。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>蚂蚁部落</title>   
<style type="text/css">   
div{  
  width:100px;  
  height:100px;  
  background:red;  
  position:relative;   
  animation:theanimation infinite alternate;  
  animation-duration:8s; 
  animation-iteration-count:infinite;
}  
@keyframes theanimation{  
  0%{top:0px;left:0px;background:red;}  
  25%{top:0px;left:100px;background:blue;}  
  50%{top:100px;left:100px;background:yellow;}  
  75%{top:100px;left:0px;background:green;}  
  100%{top:0px;left:0px;background:red;}  
}  
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

以上代码设置动画可以无限循环。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>蚂蚁部落</title>   
<style type="text/css">   
div{  
  width:100px;  
  height:100px;  
  background:red;  
  position:relative;  
       
  animation:ant-1 5s alternate,ant-2 2s  alternate;  
  animation-iteration-count:infinite,2; 
} 
@keyframes ant-1{  
  0% {left:0px;}  
  100% {left:200px;}  
}  

 
@keyframes ant-2{  
  0% {top:0px;}  
  100% {top:200px;}  
}   
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

上面代码使用animation-iteration-count属性规定了两个参数,也就是两个动画的运行次数。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 order下一篇:CSS3 rotate3d(x,y,z,angle)

最新评论

返回顶部