HTML DOM Style transitionTimingFunction property
Examples
Change the speed of the transition effect curve:
document.getElementById("myDIV").style.transitionTimingFunction="linear";
try it"
Definition and Usage
transitionTimingFunction attribute specifies the speed of the transition effect curve.
This property allows the transition effect over time to change its speed.
Browser Support
Internet Explorer 10, Firefox, Opera and Chrome support transitionTimingFunction property.
Safari supports another alternative of the property attribute that WebkitTransitionTimingFunction property.
Note: Internet Explorer 9 and earlier versions do not support transitionTimingFunction property.
grammar
Back transitionTimingFunction properties:
object .style.transitionTimingFunction
Setting transitionTimingFunction properties:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
initial|inherit"
Property Value
值 | 描述 |
---|---|
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 。 |
technical details
Defaults: | ease |
---|---|
return value: | String representing the transition-timing-function property element. |
CSS version | CSS3 |
related articles
CSS Reference: Transition-the Timing-function property