标签：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 transition 属性</title>
<style>
.box{
width:100px;
height:100px;
background:red;
-webkit-transition:1s; /* Safari 和 Chrome */
-moz-transition:1s;/* Firefox 4 */
-o-transition:1s;/* Opera */
transition:1s;/*正常情况*/
}
.box:hover{
width:200px;
height:200px;
background:blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition 属性是一个简写属性，用于设置四个过渡属性：
语法：
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
用js操作时需要首字母转大写
WebkitTransition
MozTransition
OTransition
参考资料
妙味课堂
http://www.w3school.com.cn/cssref/pr_transition.asp
更详细资料
http://www.w3cplus.com/content/css3-transition
标签：
原文地址：http://www.cnblogs.com/ginb/p/5217959.html
