CSS3中的动画--过渡属性 transition-property
03/18
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
先来看transition-property属性
transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：
HTML:
<div></div>
CSS:
div {
width: 200px;
height: 200px; background-color:red;
margin: 20px auto;
-webkit-transition: background-color .5s ease .1s;
transition: background-color .5s ease .1s;
}
div:hover { background-color: orange;}演示结果:
鼠标移入
鼠标移出
特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
用一个简单的例子来说明这个问题：
假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
详细介绍来自慕课网；
例如：让容器在hover状态下宽度和高度从100px慢慢过渡到150px，背景颜色过渡到红色。温馨提醒：务必考虑到浏览器的兼容性喔！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style>
div{
width:100px;
height:100px;
background:orange;
/*过渡的属性*/
-webkit-transition-property:all;
-moz-transition-property:all;
-ms-transition-property:all;
-o-transition-property:all;
transition-property:all;
/*过渡所需时间*/
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
-ms-transition-duration:.8s;
-o-transition-duration:.8s;
transition-duration:.8s;
/*过渡的函数*/
-webkit-transition-timing-function:ease;
-moz-transition-timing-function:ease;
-ms-transition-timing-function:ease;
-o-transition-timing-function:ease;
transition-timing-function:ease;
/*开始出现延迟的时间*/
-webkit-transition-delay:.15s;
-moz-transition-delay:.15s;
-ms-transition-delay:.15s;
-o-transition-delay:.15s;
transition-delay:.15s;
/*以上可以简写为以下模式顺序不能错*/
-webkit-transition:all .8s ease .1s;
transition:all .8s ease .05s;
}
div:hover{
width:150px;
height:150px;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果可以自己复制代查看效果，因为是动态的这里就不截图了；
版权属于：
Dcr163的博客
本文链接：
https://www.dcr163.cn/144.html（转载时请注明本文出处及文章链接）
