上一节:
下一节:

  JavaScript HTML DOM Style transition 属性

  • transition 属性

    transition属性是四个过渡属性的简写属性：transitionProperty，transitionDuration，transitionTimingFunction和transitionDelay。
    注意：始终指定transitionDuration属性，否则持续时间为0，并且转换将不起作用。
    将鼠标悬停在div元素上以逐渐改变其外观： 
    document.getElementById("myDIV").style.transition = "all 2s";
    尝试一下

  • 浏览器支持

    项 IE/Edge Chrome FireFox Safari Opera
    属性
    transition
    10.0+
    26.0+
    16.0+
    6.1+
    3.1 WebkitTransition
    12.1+

  • 语法

    返回transition属性：
    object.style.transition
    设置transition属性：
    object.style.transition = "property duration timing-function delay|initial|inherit"

  • 属性值

    值 描述
    transitionProperty 指定转换效果所用的CSS属性的名称
    transitionDuration 指定转换效果完成所需的秒数或毫秒数
    transitionTimingFunction 指定过渡效果的速度曲线
    transitionDelay 定义过渡效果何时开始
    initial 设置这个属性为默认值。 阅读有关initial信息
    inherit 从其父元素继承此属性。 阅读有关inherit的信息

  • 技术细节

    项目 描述
    默认值： all 0 ease 0
    返回值： 一个字符串，表示元素的transition属性
    CSS版本 CSS3

  • 相关页面

    CSS参考：CSS transition 属性
返回 style对象参考
上一节:
下一节: