CSS3的【transition-duration】属性

最近在学bootstrap，写CSS时用到

.classicon:hover{
    background: #c7ddef;
    opacity: 0.8;
    transition-duration:0.5s;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;

这段内容主要用到CSS3的transition属性，第一种规规矩矩，第二种简单粗暴直接告诉transition设置透明度opacity在0.5秒内渐渐变化为后期设置的透明度参数：0.8.第三种是为了防止浏览器不兼容。

【transition-duration】

CSS3属性，规定完成过度效果需要花费的时间（时间可以自己设置，我个人建议小于等于1秒，这样用户体验会好些）。

语法：transition-duration: time;
time ： 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

事实上，transiton是有四个属性，分别如下：

transition-property (执行变换的属性 )

transition-duration (变换延续时间)

transition-timing-function (延续时间内，变换速率的变化)

transition-delay (变换延迟时间)

代码演示：

1). 过渡单个属性：
transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;

2). 过渡多个属性：
[1]. 上下一一对应型：
transition-property:opacity left;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时：opacity过渡时间为2s，left过渡时间为4s。

[2]. 循环对应型：
transition-property:opacity left width height;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时：opacity和width过渡时间为2s，left和height过渡时间为4s。

3). transition简写模式：
顺序为：transition-property transition-duration transition-timing-function transition-delay
/*单个属性：*/
-moz-transition:background 0.5s ease-out 0s;
/*多个属性：*/
-moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;