首页 前端知识 css3的过度效果transition支持哪些属性,Transition 所支持的css属性

css3的过度效果transition支持哪些属性,Transition 所支持的css属性

2024-04-22 09:04:25 前端知识 前端哥 164 233 我要收藏

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,等属性;

transformlist
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

我重新整理了下格式

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5720.html
评论
发布的文章

html生成简易打字游戏

2024-04-29 16:04:21

js正则提取网页url

2024-04-29 12:04:02

js获取图片原始宽高

2024-04-29 12:04:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!