CSS基础知识（十）过渡属性

一、过渡属性

• 过渡transition是个复合属性，它包括了transition-property、transition-duration、transition-timing-function、transition-delay这四个属性，配合这四个属性完成一个完整的过渡动画效果。

1、transition-property

过渡属性，该属性是用来指定当元素其中一个属性改变时执行的过渡动画效果，该属性有三种类型的值：

none：将过渡效果设置为“无过渡效果”，或停止当前过渡效果。
all：（默认）为所支持的所有CSS属性在值变化时执行动画过渡效果。
[property name]：指定一个或多个属性名称列表，以逗号“,”进行分隔，当指定的属性产生变化时，为其执行指定属性的动画过渡效果。

2、transition-duration

过渡持续时间，该属性是用于设定一个属性的值过渡被触发开始时到结束时所需要经历的时间，单位为秒（s），如：“0.3s”或“.3s”，它的默认值为“0”，单位不能省略，否则过渡动画无法执行。

3、transition-timing-function

过渡线性规律（又称时间曲线），该属性允许你根据时间的推进去改变属性值的变换速率，目前它可能够设置6个类型的值：

• ease：默认值，逐渐变慢
• linear：匀速
• ease-in：加速
• ease-out：减速
• ease-in-out：先加速，后减速

4、transition-delay

过渡延迟，该属性规定在用户进行操作后多久开始执行动画，也就是延迟执行过渡动画的时间，单位同样是秒“s”，写法与“transition-duration”一致，默认值同样为“0”。

5、transition

复合写法：transition: property duration timing-function delay;

transition-property: 过渡属性，指定属性的name、transition效果（默认值为all）

transition-duration: 过渡效果需要多久时间完成，指定完成过渡的时间。（单位：s/ms）

transition-timing-function: 指定完成过渡的曲线。（是匀速还是非匀速）

transition-delay: 指定延迟时间。（延迟多久后开始执行）