CSS3 transition属性实现hover渐变动画效果
我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了，只是在各种浏览器中兼容性稍差， 想要追求简单极致的效果，就要失去兼容性，而且随着时间变迁， 浏览器标准终究可能还是要统一的。CSS3的Transition属性， 这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发， 并圆滑地以动画效果改变CSS的属性值。
transition:颜色 变换延续的时间 变换速率 transition:background-color 0.3s linear 变换速率： 1、ease：(逐渐变慢)默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear：(匀速)，linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out：(减速)，ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out：(加速然后减速)，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier：(该值允许你去自定义一个时间曲线)， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
//Mozilla内核 -moz-transition
//Webkit内核 -webkit-transition
//Opera -o-transition
//W3C 标准 transitionhtml>
div{
width:100px;
height:100px;
background:#e33;
transition:width2s;
-moz-transition:width2s;/*Firefox4*/
-webkit-transition:width2s;/*SafariandChrome*/
-o-transition:width2s;/*Opera*/
}
div:hover{
width:300px;
}
请把鼠标指针移动到蓝色的div元素上，就可以看到过渡效果。
注释：本例在低版本InternetExplorer中无效。
