CSS3 过度效果延迟执行和保持变化后的状态的时间设置（transition-delay实例）

CSS3 新增对象过度效果的属性 transition 可以设置四个值，其中有一个为 transition-delay，它包含两层意思，分别为：过度效果延迟执行和保持变化后的状态的时间。时间设置得短，过渡效果延迟和保持变化后的状态的时间短，反之时间长。

transition-delay 与 transition-duration 相似，是一个相对来说比较简单的属性，设置只需填写一个数字。下面先看 transition-delay 的语法规则，然后再看不同延迟时间的具体实例。

一、transition-delay语法规则

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

二、语法说明

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

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

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

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

2、<time> 取值如下：

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

三、transition-delay 多组实例

html代码：

<ul class="transition-delay">
    <li class="time3s">延迟时间和中间状态保持时间：0.3秒<br />transition-delay:.3s</li>
    <li class="time5s">延迟时间和中间状态保持时间：0.5秒<br />transition-delay:.5s</li>
    <li class="time8s">延迟时间和中间状态保持时间：0.8秒<br />transition-delay:.8s</li>
  </ul>

CSS代码：

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

.transition-delay li{width:300px;height:60px;margin-bottom:10px;padding:6px;border:1px solid #ab9595;background-color:#e3e2e0;}

.transition-delay li.time3s{transition-property:background-color;transition-duration:.3s;transition-timing-function:ease;transition-delay:.3s;}

.transition-delay li.time5s{transition-property:background-color;transition-duration:.5s;transition-timing-function:ease-in;transition-delay:.5s;}

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

.transition-delay li:nth-child(2):hover{background-color:#fbdd74;}
  .transition-delay li:nth-child(3):hover{color:#f7018c;}
  </style>

效果图（移鼠标到上面）：

• 延迟时间和中间状态保持时间：0.3秒
  transition-delay:.3s
• 延迟时间和中间状态保持时间：0.5秒
  transition-delay:.5s
• 延迟时间和中间状态保持时间：0.8秒
  transition-delay:.8s