蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 683|回复: 0

CSS3 transition

[复制链接]
发表于 2014-4-27 14:49:55 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2016-4-11 21:45 编辑

CSS3的transition属性详解:
本章节介绍一下transition属性的用法,它也是与动画相关的一个属性。
一.基本知识:
transition翻译成汉语具有"过渡"的意思,也就是说可以让一个元素的css属性值在一定时间段内进行平滑的过渡。
此属性和border、background等属性一样是复合属性。
语法结构:
[CSS] 纯文本查看 复制代码
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

参数解释:
1.transition-property:设置或者检索参与过渡的属性。
2.transition-duration: 检索或设置对象过渡的持续时间。
3.transition-timing-function:检索或设置对象中过渡的动画类型。
4.transition-delay:检索或设置对象延迟过渡的时间。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition:width 2s;
  -moz-transition:width 2s;
  -webkit-transition:width 2s;
  -o-transition:width 2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上代码演示如何在两秒内将div的宽度以动画的效果从100px设置为500px。
既然是复合属性,那么自然就可以将属性分开分别设置,具体可以参阅下面的章节:
1.transition-property属性可以参阅CSS3的transition-property属性详解一章节。
2.transition-duration 属性可以参阅CSS3的transition-duration 属性详解一章节。
3.transition-timing-function属性可以参阅CSS3的transition-timing-function属性详解一章节。
4.transition-delay 属性可以参阅CSS3的transition-delay属性详解一章节。

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表