过渡 transition

1 过渡相关属性

  • 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 设置对象延迟过渡的时间

2 CSS3触发过渡的条件

  • 伪类触发
  • 媒体查询
  • JavaScript触发

results matching ""

    No results matching ""