transition-delay 过渡延时

指定过渡开始的时间。

语法:

{ transition-delay : sTransitionDelay }

默认值: 0
继承性:
DOM 语法: object.style.transitionDelay = sTransitionDelay
适用于: 所有元素
浏览器支持: FirefoxChromeOperaSafari

可能的值:

time

描述
time 一个或者多个时间值。

说明:

属性值为 0 表示立即执行。

例子 1:

<style>
#cavas1
{
  width: 600px;
  background-color: orange;
  border: 20px solid;
  border-color:red;
  padding: 10px;
  line-height: 1.3em;
    
  -moz-transition-delay: 1s,5s;
  -webkit-transition-delay: 1s,5s;
  -o-transition-delay: 1s,5s;
  transition-delay: 1s,5s;
    
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
    
  -moz-transition-property: background-color,border-color;
  -webkit-transition-property: background-color,border-color;
  -o-transition-property: background-color,border-color;
  transition-property: background-color,border-color;
    
  -moz-transition-timing-function: ease-out,ease;
  -webkit-transition-timing-function: ease-out,ease;
  -o-transition-timing-function: ease-out,ease;
  transition-timing-function: ease-out,ease;
}
#cavas1:hover
{
  background-color: green;
  border-color: pink;
}
</style>

<div id="cavas1">
  外湖富商高赞的女儿高秋芳,聪明俊美,被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机,登门参试者甚多,但都不中意。宦门公子颜俊,不学无术,恃财仗势,选美寻欢。在庙会上,颜俊见秋芳貌美,欲以金钱取得她的欢心,虽遭碰壁,却不死心。于是,他指使其债户果子铺掌柜尤辰,前往高府骗婚。不料高赞择婿严谨,定要会文相婿。颜俊腹中无墨,又怕高家认出他是追赶高小姐的无耻之徒,便想出移花接木之计,假以会文为名,蒙骗其表弟钱青冒名顶替,到高府应试。相亲宴上,秋芳乔装改扮,亲赴席前送酒试才。高赞见钱青才貌出众,欣然允亲。吉日将临,高赞定要佳婿亲自迎娶。颜俊唯恐真情败露,再次请钱青帮助。钱青正为替他相亲之事悔恨不已,拒不替他迎亲。后来,颜母亲自出面,迫使钱青应允。钱青万般无奈,违心从命。迎亲之日,高府宾客满座,盛情款待,忽然,天气突变,风雪交加,湖水浪涌,无法行船,高赞恐误吉日良辰,执意在他家拜堂成亲。迎亲者自知不妥,但又不能言明,只得拜天地,入洞房。秋芳夙愿得偿,感到无比幸福,对钱青关怀备至。可是,钱青悔恨交加,不知所措。花烛之夜,一对新人,各怀心事,痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲,怒不可遏,硬拉钱青上公堂,告钱青骗婚占妻之罪。高赞得知真情,也拉尤辰到公堂论理。知县在夫人的协助下,审明案情,惩戒了颜俊,成全了钱青与秋芳的姻缘。
</div>
测试结果:Firefox 4,Opera 11,Safari 5,Chrome 10 都支持该属性。
本属性最后更新时间:2011-05-04 13:47:06