Style transitionTimingFunction Property
Style ObjectExample
Change the speed curve of the transition effect:
document.getElementById("myDIV").style.transitionTimingFunction="linear";
Try it Yourself »
Definition and Usage
The transitionTimingFunction property specifies the speed curve of the transition effect.
This property allows the transition effect to change its speed over time.
Browser Support
Internet Explorer 10, Firefox, Opera, and Chrome support the transitionTimingFunction property.
Safari supports an alternative property to this property, namely the WebkitTransitionTimingFunction property.
Note:Internet Explorer 9 and earlier versions do not support the transitionTimingFunction property.
Syntax
Return the transitionTimingFunction property:
object.style.transitionTimingFunction
Set the transitionTimingFunction property:
object.style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
initial|inherit"
Property Values
| Value | Description |
|---|---|
| ease | Default value. Specifies a transition effect with a slow start, then fast, then slow end (equivalent to cubic-bezier(0.25,0.1,0.25,1)). |
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)). |
| ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)). |
| ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)). |
| ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)). |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values between 0 and 1. |
| initial | Set this property to its default value. Seeinitial。 |
| inherit | Inherit this property from the parent element. Seeinherit。 |
Technical Details
| Default Value: | ease |
|---|---|
| Return Value: | A string, representing the element's transition-timing-function property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:transition-timing-function property
Other Extensions