动画–过渡属性 transition-property
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition-property属性：
transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定
例如background-color,width,height等各种标准的CSS属性。
特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
用一个简单的例子来说明这个问题：
假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，
那么all代表的就是“width”、“height”和“background”。
如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>07动画--过渡属性 transition-property档</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div></div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
margin: 100px auto;
background-color: #900;
/*transition:background-color 1s ease .2s;
-webkit-transition: background-color .5s ease .1s;*/
transition-property:background-color;
transition:all 5s ease .2s;
/*-webkit-transition: all .5s ease .1s;
transition:all .5s ease .1s;*/
}
div:hover {
/*width: 400px;
height: 400px;*/
background-color: #FF0;
}
/*在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同*/