css3过渡效果

css3的过渡效果，从一种样式逐渐过渡到另外一种样式：transition。
transition 简写属性，用于在一个属性中设置四个过渡属性。
例如：transition:width 2s linear 1s; //用两秒的时间以匀速改变宽度，效果在一秒后开始。
transition-property 规定应用过渡的 CSS 属性的名称。
例如：transition-property:width;
transition-duration 定义过渡效果花费的时间。默认是 0。
例子：transition-duration:1s 或者100ms;
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
transition-delay 规定过渡效果何时开始。默认是 0。
例如：transition-delay: 1s或者100ms;
IE9不支持transition。
针对不同浏览器加不同前缀：
IE: -ms-;
chrome,safari: -webkit-;
opera: -o-;
firefox: -moz-;

demo:
div{width:100px;height:100px;background:#f30;transition:width 1s linear}
div:hover{width:300px;}
以一秒的时间匀速过渡到300的宽度，鼠标离开div，以一秒的时间匀速过渡到100的宽度。