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

CSS3 animation-direction

2018-9-6 00:19| 作者: admin| 查看: 842| 评论: 0|来自: 蚂蚁部落

animation-direction属性用于设置animation动画是否可以反向运动。

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

语法结构:

[CSS] 纯文本查看 复制代码
animation-direction:normal | alternate [ , normal | alternate ]*

参数解析:

(1).normal:动画正常方向运行。

(2).alternate:正常方向与反方向交替。

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

代码实例:

[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 5s infinite; 
  -webkit-animation:theanimation 5s infinite; 
  -moz-animation:theanimation 5s infinite; 
  -o-animation:theanimation 5s infinite; 
   
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
  -moz-animation-direction:alternate;
  -o-animation-direction:alternate;
} 
@keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-webkit-keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-moz-keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-o-keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-ms-keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
</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 infinite,ant-2 2s infinite;  
  -webkit-animation:ant-1 5s infinite,ant-2 2s infinite;  
  -moz-animation:ant-1 5s infinite,ant-2 2s infinite;  
  -o-animation:ant-1 5s infinite,ant-2 2s infinite;  
   
  animation-direction:alternate,normal;
  -webkit-animation-direction:alternate,normal;
  -moz-animation-direction:alternate,normal;
  -o-animation-direction:alternate,normal;
} 
@keyframes ant-1{  
  0% {left:0px;}  
  100% {left:200px;}  
}  
@-webkit-keyframes ant-1{  
  0% {left:0px;}  
  100% {left:200px;}  
}  
@-moz-keyframes ant-1{  
  0% {left:0px;}  
  100% {left:200px;}  
}  
@-o-keyframes ant-1{  
  0% {left:0px;}  
  100% {left:200px;}  
}  
@-ms-keyframes ant-1{  
  0% {left:0px;}  
  100% {left:200px;}  
} 
@keyframes ant-2{  
  0% {top:0px;}  
  100% {top:200px;}  
}  
@-webkit-keyframes ant-2{  
  0% {top:0px;}  
  100% {top:200px;}  
}  
@-moz-keyframes ant-2{  
  0% {top:0px;}  
  100% {top:200px;}  
}  
@-o-keyframes ant-2{  
  0% {top:0px;}  
  100% {top:200px;}  
}  
@-ms-keyframes ant-2{  
  0% {top:0px;}  
  100% {top:200px;}  
}  
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

以上代码可以分别设置两个动画一个是两个方向交替运行,一个只能够以正常方向运行。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部