CSS3之transition

^ _ ^

首先：  transition 过渡   平滑的改变样式

　　 transition-property 要过渡的属性

 　　transition-duration 过渡的时间（s）

 　　transition-delay    过渡前等待时间

 　　transition-timing-function  过渡速度曲线

　　 　　 ease | linear | ease-in | ease-out |ease-in-out | cubic-bezier

ok, 我们先来看一个例子。

　　 要求：鼠标悬浮2s后,宽度以“慢-快-慢”的速度曲线变为300px，高以“匀速”的速度曲线变为300px。

 　　#show{ transition:width 2s 2s ease,height 2s 2s linear; width:100px; height:100px; background-color:green;}

　　 #show:hover{width:300px;}

 　　<div id="show"></div>  

　　下面不知道会不会显示哎（没试过）...-_-

PS : 当然，你也可以使用property,duration...一样样的设置...#_#

 还有一种更简便的方法：all 来代替属性，但是，这代表着等待时间，速度曲线，过渡时间都会相同。^_^

　　eg : transition:all 2s 2s ease;

CSS3之transition,布布扣,bubuko.com