文章导航

CSS3 transition-delay

2018-5-21 22:48| 发布者: admin| 查看: 1069| 评论: 0|来自: 蚂蚁部落

transition-delay属性用来设置过渡动画执行的延迟时间。

更多关于transition内容可以参阅CSS3 transition一章节。

语法结构:

[CSS] 纯文本查看 复制代码
transition-delay:<time>[ ,<time> ]*

参数解析:

(1).<time>:设置过渡动画开始执行的延迟时间。

特别说明:设置多个时间用逗号分隔,和transition-property设置的属性一一对应。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style type="text/css">  
#ant{ 
  width:100px; 
  height:100px; 
  background:blue;  
  transition-property:width,height;  
  transition-duration:2s;   
  transition-delay:2s; 
} 
#ant:hover{ 
  width:500px; 
  height:200px; 
} 
</style> 
</head> 
<body> 
<div id="ant"></div> 
</body> 
</html>
鼠标悬浮在div之上需要延迟两秒再执行动画效果。 
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style>  
#ant{ 
  width:100px; 
  height:100px; 
  background:blue; 
  transition-property:width,height;   
  transition-duration:2s,6s; 
  transition-delay:2s,6s;  
} 
#ant:hover{ 
  width:500px; 
  height:200px; 
} 
</style> 
</head> 
<body> 
<div id="ant"></div> 
</body> 
</html>

鼠标悬浮于div之上的要分别延迟2秒和6秒才开始指向宽度和高度动画过渡效果。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部