^ _ ^
首先: 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
原文地址:http://www.cnblogs.com/hualongbei/p/3719343.html