css3的过度效果transition支持哪些属性，Transition 所支持的css属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了css3的过度效果transition支持哪些属性，Transition 所支持的css属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下：

名称	描述	属性
color:	通过红、绿、蓝和透明度组件变换（每个数值处理）	如： background-color, border-color, color, outline-color等css属性；
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等属性；
percentage:	真实的数字	如：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等属性；
integer	离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生	如： outline-offset, z-index等属性；
number	真实的（浮点型）数值，	如： zoom, opacity, font-weight,等属性；
transform	list
rectangle:	通过x, y, width 和 height（转为数值）变换	如：crop
visibility:	离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”	如：visibility
shadow:	作用于color, x, y 和 blur（模糊）属性	如：text-shadow
gradient:	通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画	如：background-image
paint server (SVG):	只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似	参考上面的gradient 和color
space-separated list of above:	如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
a shorthand property:	如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化