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

CSS3 animation-timing-function

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

animation-timing-function属性用于设置animation动画的过渡类型。

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

语法结构:

[CSS] 纯文本查看 复制代码
animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [ , linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*

参数解析:

(1).linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 

(2).ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 

(3).ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 

(4).ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 

(5).ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 

(6).cubic-bezier(<number>, <number>, <number>, <number>): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内;赛贝尔曲线类型可以在线生成,如贝塞尔曲线生成工具

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

代码实例:

[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 alternate;  
  -webkit-animation:theanimation 5s infinite alternate;  
  -moz-animation:theanimation 5s infinite alternate;  
  -o-animation:theanimation 5s infinite alternate;  
     
  animation-timing-function:ease-in; 
  -webkit-animation-timing-function:ease-in; 
  -moz-animation-timing-function:ease-in;  
  -o-animation-timing-function:ease-in;   
}  
@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;}  
} 
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

以上代码可以使用animation-timing-function属性设置动画由慢到快进行过渡。

[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 alternate,ant-2 2s infinite alternate;   
  -webkit-animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate;   
  -moz-animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate;   
  -o-animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate;   
     
  animation-timing-function:ease-in,ease-out; 
  -webkit-animation-timing-function:ease-in,ease-out; 
  -moz-animation-timing-function:ease-in,ease-out; 
  -o-animation-timing-function:ease-in,ease-out; 
}  
@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;}   
}   


@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;}   
}      
</style>   
</head>   
<body>   
<div></div>   
</body>   
</html>

以上代码可以通过animation-timing-function属性设置两个动画的过渡类型。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部