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: | 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化 |
本文摘自:https://www.cnblogs.com/yunkou/p/4235469.html
我重新整理了下格式