Transition

一、简介

Transition 可以设置 CSS 属性的过渡效果，一般用于动画效果的实现。它有以下几个属性。

transition-property 用于指定应用过渡属性的名称
transition-duration 用于指定这个过渡的持续时间
transition-delay 用于指定延迟过渡的时间
transition-timing-function 用于指定过渡的类型
 

transition-property

transition-property 用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。
默认值为 all 也就是所有的元素都应用过渡效果。

 

transition-duration

transition-duration 用于设置过渡的持续时间，属性值以秒s或毫秒ms为单位，默认值为0。
同样可以指定多个时长，多个每个时长会被应用到由 transition-property 指定的对应属性上。

 

transition-delay

transition-delay 规定了在过渡效果开始作用之前需要等待的时间（延迟时间），值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性transition-property。

 

transition-timing-function

transition-timing-function用于指定过渡类型，可选值有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier