JavaScript HTML DOM Style transitionTimingFunction 属性

  • transitionTimingFunction 属性

    transitionTimingFunction属性指定过渡效果的速度曲线。此属性允许转换效果在其持续时间内改变速度。
    更改过渡效果的速度曲线:
    document.getElementById("myDIV").style.transitionTimingFunction = "linear";
    尝试一下
  • 浏览器支持

    IE/Edge Chrome FireFox Safari Opera
    属性
    transitionTimingFunction
    10.0+
    26.0+
    16.0+
    6.1+
    3.1 WebkittransitionTimingFunction
    12.1+
  • 语法

    返回transitionTimingFunction属性:
    object.style.transitionTimingFunction
    设置transitionTimingFunction属性:
    object.style.transitionTimingFunction = "ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()| initial|inherit"
  • 属性值

    描述
    ease 默认值。 指定缓慢启动的转换效果,然后快速,然后缓慢结束(相当于cubic-bezier(0.25,0.1,0.25,1))
    linear 指定从开始到结束具有相同速度的过渡效果(相当于cubic-bezier(0,0,1,1))
    ease-in 指定慢启动的过渡效果(相当于cubic-bezier(0.42,0,1,1))
    ease-out 指定慢速结束的过渡效果(相当于cubic-bezier(0,0,0.58,1))
    ease-in-out 指定慢启动和结束的过渡效果(相当于cubic-bezier(0.42,0,0.58,1))
    cubic-bezier(n, n, n, n) 在cubic-bezier函数中定义自己的值。 可能的值是从0到1的数值
    initial 设置这个属性为默认值。 阅读有关initial信息
    inherit 从其父元素继承此属性。 阅读有关inherit的信息
  • 技术细节

    项目 描述
    默认值: ease
    返回值: 一个字符串,表示元素的transition-timing-function属性
    CSS版本 CSS3
  • 相关页面