css3过渡transition

浏览数：20 / 时间：2015年06月09日

过渡：transition

transition：transition-property/duration/timing-function/delay的缩写。
　　　　transition ： <‘transition-property‘> || <‘transition-duration‘> || <‘transition-timing-function‘> || <‘transition-delay‘> [, ... ];

　　　　transition-property：变换的属性名。
　　　　　　none、all、一个或多个<property>(逗号分隔)。

　　　　transition-duration：持续时间。单位s或ms。
　　　　　　<time>默认为0。无过渡效果。

　　　　transition-timing-function：过渡效果的速度曲线。
　　　　　　linear：匀速，等于cubic-bezier(0,0,1,1)
　　　　　　ease：慢快慢，等于cubic-bezier(0.25,0.1,0.25,1)
　　　　　　ease-in：以慢开始，等于cubic-bezier(0.25,0.1,0.25,1)
　　　　　　ease-out：以慢结束，等于cubic-bezier(0,0,0.25,1)
　　　　　　ease-in-out：以慢开始和结束，等于cubic-bezier(0.42,0,0.58,1)
　　　　　　cubiz-bezier(n,n,n,n)：【三次贝塞尔】在cubiz-bezier函数中定义自己的值，0~1。

transition-delay：指定开始时间。默认0。
　　　　　　逗号分隔多个属性的延迟时间。
　　　　　　-moz-transition: color 0.3s ease-out 2s;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过度</title>
<style type="text/css">
/*案例*/
.t{
width:200px;
height:300px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s,height 2s; /* Firefox 4 */
-webkit-transition:width 2s,height 2s; /* Safari and Chrome */
-o-transition:width 2s,height 2s;/* Opera */
}
.t:hover{ width:300px; height:200px; }
/*测试 transition-timing-function*/
.bwh{width:100px;height:50px;background:#cccccc;border:1px solid red;}
.div1{ transition:width 2s; transition-timing-function: linear;/*规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）*/}
.div2{ transition:width 2s; transition-timing-function: ease-in;/*规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。*/}
.div3{ transition:width 2s; transition-timing-function: ease;/*规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1))*/}
.div4{ transition:width 2s; transition-timing-function: ease-out;/*规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。*/}
.div5{ transition:width 2s; transition-timing-function: ease-in-out;/*规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）*/}
.bwh:hover{width:400px;}

/*测试透明度*/
.d{ width:200px;
height:100px;
background:black;
transition:opacity 3s;
-moz-transition:opacity 3s; /* Firefox 4 */
-webkit-transition:opacity 3s; /* Safari and Chrome */
-o-transition: opacity 3s;/* Opera */
}
.d:hover{opacity: 0.1;}
</style>
</head>
<body>
<div class="t"></div>
<div class="d"></div>
<div class="bwh div1"></div>
<div class="bwh div2"></div>
<div class="bwh div3"></div>
<div class="bwh div4"></div>
<div class="bwh div5"></div>
<div class="bwh div6"></div>
</body>
</html>