CSS3中transition 知识的学习

Posted 2021-04-09 非典型疯狂猿始人

前端技术面十分广泛，而且技术点细节多。近日在业务开发过程中使用了css3的transition相关知识，为此我又重新学习了transition的知识点，通过过渡—transition，可以让前端开发人员不需要JS就可以实现简单的动画交互效果。但也有很多细节需要我们清晰一下。希望简单的梳理可以帮助我和你对它有更清楚的了解。

 

定义

过渡transition是一个复合属性，包括：

transition-property（过渡属性(默认值为all)

transition-duration（过渡持续时间(默认值为0s)

transition-timing-function（过渡函数(默认值为ease函数)

transition-delay（过渡延迟时间(默认值为0s)

这四个子属性。通过这四个属性的配合可以完成一个完成的过渡效果。

 

复合属性

过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0。其中，<transition-duration>和<transition-delay>都是时间。当两个时间同时出现时，第一个是<transition-duration>，第二个是<transition-delay>；当只有一个时间时，它是<transition-duration>，而<transition-delay>为默认值0，如下图：

过渡属性

transition-property，它的值有none、all、<transition-property>

none:没有指定任何样式;
all:默认值,表示指定元素所有支持transition-property属性的样式

<transition-property>: 可过渡的样式,可用逗号分开写多个样式。 

可过渡的属性

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡属性。

包含了如下内容：

颜色: 

colorbackground-color border-color outline-color

位置:

backround-positionleft right top bottom

长度:

[1]max-height min-height max-widthmin-width height width

[2]border-width margin paddingoutline-width outline-offset

[3]font-size line-height text-indentvertical-align 

[4]border-spacing letter-spacing word-spacing

数字:

opacity visibilityz-index font-weight zoom

组合: 

text-shadow transformbox-shadow clip

其他:

gradient

 

过渡持续时间

transition-duration该属性的单位是秒s或毫秒ms，初始值是0s，其不能为负，必须写单位

 

过渡延迟时间

transition-delay该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms，初始值是0s，其不能为负，必须写单位

多值

transition的多个属性值用逗号分隔开表示可以同时为多个值设置过渡属性。

对于transition，它是css3新增 的十分便捷高效的语法，对于前面语法的解读和举例，希望对你的知识更新有帮助，谢谢大家的阅读，期待大家的点赞、留言和转发。