CSS3过渡 transition-property属性
语法：
transition-property：all | none | <property>[ ,<property> ]*
参数解析:
1.all:设置所有可以进行过渡的属性。
2.none:不指定可以进行过渡的属性。
3.<property>:指定可以进行过渡的属性。
特别说明:
1.如果设置多个属性，属性名称之间用逗号分隔。
2.对应的脚本属性为transitionProperty。
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下：
1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；
2、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；
3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；
4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；
5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；
6、transform list:详情请参阅：《CSS3 Transform》
7、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop
8、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
9、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image
11、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似
12、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
13、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化
具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php中文网.com/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width;
-moz-transition-property:width;
-webkit-transition-property:width;
-o-transition-property:width;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代码设置的过渡属性为width。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
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;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代码可以设置两个属性的过渡效果，属性之间用逗号分隔。
![Front-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Nullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB-Frontend-Tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Praktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
