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 ，然后工作与上面类似
space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化