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):  只支持下面的情况:从gradientgradient以及colorcolor,然后工作与上面类似

参考上面的gradient color

space-separated list of above: 如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化
a shorthand property:  如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

本文摘自:https://www.cnblogs.com/yunkou/p/4235469.html

我重新整理了下格式

你可能感兴趣的:(#,CSS,css,前端,transition)