transition

  • 版本:CSS3
  • 继承性:无
transition属性在CSS过渡中是比较常用的,本文将带你深入理解transition属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上transition的演示案例,希望能够对你有所帮助。

transition的具体语法

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

默认值看每个独立属性

适用于:所有元素,包含伪对象:after和:before

继承性:无

transition的取值介绍

[ transition-property ]:
检索或设置对象中的参与过渡的属性
[ transition-duration ]:
检索或设置对象过渡的持续时间
[ transition-timing-function ]:
检索或设置对象中过渡的动画类型
[ transition-delay ]:
检索或设置对象延迟过渡的时间

transition的使用说明

复合属性。检索或设置对象变换时的过渡。
  • 可以为同一元素的多个属性定义过渡效果。示例:

    缩写方式:

    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;
  • 如果定义了多个过渡的属性,而其他属性只有一个参数值,则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写:

    拆分方式:

    transition-property:border-color, background-color, color;
    transition-duration:.5s;
    transition-timing-function:ease-in;
    transition-delay:.1s;
  • 如果需要定义多个过渡属性且不想指定具体是哪些属性过渡,同时其他属性只有一个参数值,据此可以对上面的例子进行缩写:

    缩写方式:

    transition:all .5s ease-in .1s;

    拆分方式:

    transition-property:all;
    transition-duration:.5s;
    transition-timing-function:ease-in;
    transition-delay:.1s;
  • 对应的脚本特性为transition

transition的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6-9 4-18 5.1.7 13-23 11.5-12.5
版本 10

transition的完整演示案例