CSS3过渡

来源:互联网 发布:苹果手机电池修复软件 编辑:程序博客网 时间:2024/03/29 21:49

一、CSS3过度

  • (1)语法
    transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
    默认值:看每个独立属性
    取值
    [ transition-property ]: 检索或设置对象中的参与过渡的属性
    [ transition-duration ]: 检索或设置对象过渡的持续时间
    [ transition-timing-function ]: 检索或设置对象中过渡的动画类型
    [ transition-delay ]: 检索或设置对象延迟过渡的时间

  • (2)transition-property
    语法
    transition-property:all | none | property[ ,property ]*
    默认值:all
    取值
    all: 所有可以进行过渡的css属性
    none: 不指定过渡的css属性
    property: 指定要进行过渡的css属性
    说明
    检索或设置对象中的参与过渡的属性。
    如果提供多个属性值,以逗号进行分隔。

  • (3)transition-duration
    语法
    transition-duration:time[ ,time ]*
    默认值:0
    取值
    time: 指定对象过渡的持续时间
    说明
    检索或设置对象过渡的持续时间。如果提供多个属性值,以逗号进行分隔。

  • (4)transition-time-function
    语法
    transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) ]*
    默认值:ease
    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)
    cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
    说明
    检索或设置对象中过渡的动画类型。 如果提供多个属性值,以逗号进行分隔。

  • (5)transition-delay
    语法
    transition-delay:time[ ,time ]*
    默认值:0
    取值
    time: 指定对象过渡的延迟时间
    说明
    检索或设置对象延迟过渡的时间。如果提供多个属性值,以逗号进行分隔。

  • (6)
    缩写方式:
    transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

    拆分方式:
    transition-property:border-color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s;

原创粉丝点击