传智博客
快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 transition-delay

2017-9-16 22:48| 发布者: admin| 查看: 626| 评论: 0|来自: 蚂蚁部落

传智播客

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

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

语法结构:

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

参数解析:

<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; 
  -moz-transition-property:width,height; 
  -webkit-transition-property:width,height; 
  -o-transition-property:width,height; 
     
  transition-duration:2s; 
  -moz-transition-duration:2s; 
  -webkit-transition-duration:2s; 
  -o-transition-duration:2s; 
   
  transition-delay:2s; 
  -moz-transition-delay:2s; 
  -webkit-transition-delay:2s; 
  -o-transition-delay:2s; 
} 
#ant:hover{ 
  width:500px; 
  height:200px; 
} 
</style> 
</head> 
<body> 
<div id="thediv"></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; 
  -moz-transition-property:width,height; 
  -webkit-transition-property:width,height; 
  -o-transition-property:width,height; 
     
  transition-duration:2s,6s; 
  -moz-transition-duration:2s,6s; 
  -webkit-transition-duration:2s,6s; 
  -o-transition-duration:2s,6s; 
   
  transition-delay:2s,6s; 
  -moz-transition-delay:2s,6s; 
  -webkit-transition-delay:2s,6s; 
  -o-transition-delay:2s,6s; 
} 
#ant:hover{ 
  width:500px; 
  height:200px; 
} 
</style> 
</head> 
<body> 
<div id="ant"></div> 
</body> 
</html>

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-11 19:21 , Processed in 0.069184 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部