css3 样式过度器 Transition

transition   简写属性，用于在一个属性中设置四个过渡属性。

　　1. transition 把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

　　eg: div{width:100px;transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */}

　　2.transition-property 把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：(规定应用过渡的 CSS 属性的名称)。

　　eg:div{width:100px;height:100px;background:blue;transition-property: width;transition-duration: 2s;}

　　3.transition-duration 定义过渡效果花费的时间。

　　eg:div{width:100px;height:100px;background:blue;transition-property: width;transition-duration: 2s;}

　4transition-timing-function 规定过渡效果的时间曲线。

　　语法  transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

　　

5 transition-delay 规定过渡效果何时开始。

eg 在过渡效果开始前等待 2 秒：div{transition-delay: 2s;-moz-transition-delay: 2s; /* Firefox 4 */-webkit-transition-delay: 2s; /* Safari 和Chrome */-o-transition-delay: 2s; /* Opera */}