名称:transition
语法:transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
取值说明:
[ transition-property ]:对象过渡的css属性
[ transition-duration ]:对象过渡的持续时间
[ transition-timing-function ]:对象过渡的动画类型
[ transition-delay ]:对象延迟过渡的时间
说明:复合属性,对象的过渡效果。
名称:transition-property
语法:transition-property : none | all | [ <IDENT> ] [, <IDENT> ]*
取值说明:
all:所有可以进行过渡的css属性
none:不指定过渡的css属性
<IDENT>:指定要进行过渡的css属性
说明:对象过渡的css属性,默认值为all,多个<IDENT>用逗号分隔。
名称:transition-duration
语法:transition-duration: <time> [, <time>]*
说明:对象过渡的持续时间,默认值为0,多个取值用逗号分隔。
名称:transition-timing-function
语法:transition-timing-function: <single-transition-timing-function> [, <single-transition-timing-function> ]*
取值:
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
取值说明:
linear:匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:逐渐变慢。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:加速。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:减速。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:加速然后减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:等同于steps(1, start)
step-end:等同于steps(1, end)
steps(<integer>[, [ start | end ] ]?):参数<integer>表示分为几步完成过渡,取值正整数,另外一个参数可选,取值 start 或者 end,指定时间间隔内值发生变化的点,不取值则默认为 end
cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
说明:对象过渡的动画类型,默认值ease,多个取值用逗号分隔。
名称:transition-delay
语法:transition-delay: <time> [, <time>]*
说明:对象延迟过渡的时间,默认值为0,多个取值用逗号分隔。
注释:对象的过度效果,可以通过 transition 缩写的方式指定,也可以分别对 transition-property、transition-duration、transition-timing-function、transition-delay对其分别设置,例如下面的书写方式是一样的:
代码片段 1:
transition: all 5s ease 2s;
代码片段 2:
transition-property: all;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 2s;