过渡

允许 CSS 的属性值在一定的时间区间内平滑地过渡

在鼠标单击、获取焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变 CSS 的属性值

transition 属性

transition-property 属性

检索或设置对象中的参与过渡的属性

语法

transition-property：none | all | property

参数说明

参数	作用
none	没有属性改变
all	所有属性改变（默认值）
property	元素属性名

transition-duration 属性

检索或设置对象过渡的持续时间

语法

transition-duration: time

参数说明

规定完成过渡效果需要花费的时间（以秒或毫秒计）

默认值为 0

transition-timing-function 属性

检索或设置对象中过渡的动画类型

语法

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps ( <integer>[, [ start | end ] ] )

参数说明

参数	说明
linear	线性过渡。等同于贝塞尔曲线(0.0，0.0，1.0，1.0)
ease	平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 0.1)
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 ] ] )`	接受两个参数，第一个参数必须是正整数，第二个是start或end，默认值为end(不建议)
cubic-bezier(num1, num2, num3, num4)	特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

transition-delay 属性

检索或设置对象延迟过渡的时间

语法

transition-delay：time

参数说明

• 指定秒或毫秒数之前要等待切换效果开始

• 默认值为 0

transition 属性

复合属性，检索或设置对象变换时的过渡

语法

transition: property duration timing-function delay

必须写duration属性值