YouTip

# Style transitionTimingFunction Property [ Style Object](#) ## Example 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 a 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 for this property, which is 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" ## 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 from 0 to 1. | | initial | Sets this property to its default value. See (#). | | inherit | Inherits this property from its parent element. See (#). | ## Technical Details | Default value: | ease | | --- | | Return value: | A string, representing the element's transition-timing-function property. | | CSS Version | CSS3 | * * * ## Related Articles CSS Reference: (#)