过渡transition

    W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
    下面我们来看看transition如何使用：

• transition 属性是一个简写属性，用于设置四个过渡属性：
• transition-property：规定设置过渡效果的 CSS 属性的名称。
• transition-timing-function：规定速度效果的速度曲线。
• transition-delay：定义过渡效果何时开始。

transition-property
    transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果。

			transition-property:none;
			transition-property:all;
			transition-property:width;

效果如下：

transition-duration
    transition-duration是用来规定完成过渡效果需要多少秒或毫秒，单位为s（秒）或者ms(毫秒)。

transition-duration: 3s;

效果如下：

transition-timing-function
    　transition-timing-function规定速度效果的速度曲线。

• ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

transition-timing-function:ease;

• linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

transition-timing-function:linear;

• ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

transition-timing-function:ease-in;

• ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)

transition-timing-function:ease-out;

• ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

transition-timing-function:ease-in-out;

• cubic-bezier：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-timing-function:cubic-bezier(0.5,0.5);

transition-delay
    transition-delay用来规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。也就是说当改变元素属性值后多长时间开始执行transition效果。

transition-delay: 3s;