首页 > 代码库 > CSS3之transition

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>  

  下面不知道会不会显示哎(没试过)...-_-

<style></style>
 

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

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

  eg : transition:all 2s 2s ease;