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

CSS3 transition-timing-function

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

transition-timing-function属性用来设置进行动画过渡类型,也就是属性值过渡以何种曲线进行。

更多关于transition内容可以参阅CSS3 transition一章节。

[CSS] 纯文本查看 复制代码
transition-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]区间内。赛贝尔曲线类型可以在线生成,如贝塞尔曲线生成工具

特别说明:多个属性值以逗号进行分隔,和transition-property设置的属性一一对应。 

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  transition-duration:2s,6s;
  transition-timing-function:ease-in,linear;
}
#ant:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部