CSS3 背景过度元素运动持续时间长短设置（transition-duration语法规则及多组实例）

　　CSS3 新增的背景、元素运动过度效果的属性 transition 可以设置四个值，其中有一个为 transition-duration，即过度持续时间。值设置不同，背景或元素运动过渡会呈现不同的延迟效果，主要是响应快慢和持续时间长短的区别。

　　transition-duration 是一个相对来说比较简单的属性，设置持续时间长短只需要填一个数字即可。下面先看 transition-duration 的语法规则，然后再看不同持续时间的具体实例。

　　一、transition-duration语法规则

　　transition-duration：<time>[, <time> * ]

　　二、语法说明

　　1、transition-property 可以设置多组值，默认值为 0

　　A、<time> 表示第一组持续时间，不能省略；

　　B、[]中的 <time> 表示第二组持续时间，可以省略；

　　C、* 表示第三组、第四组、……第n组持续时间，可以省略；

　　2、<time> 取值如下：

　　<time>的取值范围为[0.0, 1.0]之间的浮点数，如果所填值不在此范围内，则会自动计算取最接近所填值的近似值。

　　三、transition-duration 多组实例

　　html代码：

　　<ul class="transition-duration">
　　　<li class="time3s">持续时间：0.3秒<br />transition-duration:.3s</li>
　　　<li class="time5s">持续时间：0.5秒<br />transition-duration:.5s</li>

　　　<li class="time8s">持续时间：0.8秒<br />transition-duration:.8s</li>
</ul>

　　CSS代码：

　　<style type="text/css">
　　.transition-duration{overflow:hidden;margin:0px;padding:0px;list-style:none;}

　　.transition-duration li{width:250px;height:60px;margin-bottom:10px;padding:6px;border:1px solid #ab9595;background-color:#e3e2e0;}
　　.transition-duration li.time3s{transition-property:background-color;transition-duration:.3s;transition-timing-function:ease;}
　　.transition-duration li.time5s{transition-property:background-color;transition-duration:.5s;transition-timing-function:ease-in;}

　　.transition-duration li.time8s{transition-property:color;transition-duration:.8s;transition-timing-function:ease-in;}
　　.transition-duration li:nth-child(1):hover{background-color:#ff0030;}

　　.transition-duration li:nth-child(2):hover{background-color:#0042ff;}
　　.transition-duration li:nth-child(3):hover{color:#b21a06;}
　　</style>

　　效果图：

• 持续时间：0.3秒
  transition-duration:.3s
• 持续时间：0.5秒
  transition-duration:.5s
• 持续时间：0.8秒
  transition-duration:.8s