8.2 过渡transition
过渡相关属性
transition 检索或设置对象变换时的过渡。复合属性
注意:
如果只提供一个参数,则为
transition-duration
的值定义;如果提供二个参数,则第一个为transition-duration
的值定义,第二个为transition-delay
的值定义transition-property 设置对象中的参与过渡的属性
取值:
none: 不指定过渡的css属性 all: 所有可以进行过渡的css属性 (默认值) IDENT: 指定要进行过渡的css属性 ,如果提供多个属性值,以逗号进行分隔。
可以被过渡的属性有:
颜色属性 具有长度值 百分比的属性 值是数字的属性 如 z-index opacity outline-offset等 变形系列属性 阴影 渐变
transition-duration 设置对象过渡的持续时间,如果提供多个属性值,以逗号进行分隔。
transition-timing-function 设置对象中过渡的动画类型
取值:
ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 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)
cubic-bezier( number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
step-start: 等同于 steps(1, start)
step-end: 等同于 steps(1, end)
steps( integer [, [ start | end ] ]?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
在线制作贝塞尔曲线: https://cubic-bezier.com/#.17,.67,.83,.67
transition-delay 设置对象延迟过渡的时间
CSS3触发过渡的条件
- 伪元素触发
- 媒体查询
- JavaScript触发
CSS3过渡事件
事件名称 | 何时触发 |
---|---|
transitionstart |
一个CSS3过渡开始之后 (在延时之后)。 |
transitioncancel |
一个CSS3过渡被取消。 |
transitionend |
一个CSS3过渡完成。 |
transitionrun |
一个CSS3过渡开始时 (在延时之前)。 |