YouTip

element: document.getElementById("myDIV").style.animationTimingFunction="linear"; [Try it yourself »](#) * * * ## Definition and Usage The animationTimingFunction property specifies the speed curve of the animation. The speed curve defines the time an animation takes from one set of CSS styles to another. The speed curve is used to make the changes in the animation smooth. * * * ## Browser Support  Only Firefox supports the animationTimingFunction property. * * * ## Syntax Return the animationTimingFunction property: _object_.style.animationTimingFunction Set the animationTimingFunction property: _object_.style.animationTimingFunction="linear|ease|ease-in|ease-out|cubic-bezier(_n_,_n_,_n_,_n_)|initial|inherit" ## Property Values | Value | Description | | --- | --- | | linear | The animation has the same speed from start to end. | | ease | Default value. The animation has a slow start, then fast, and ends slowly. | | ease-in | The animation has a slow start. | | ease-out | The animation has a slow end. | | ease-in-out | The animation has a slow start and a slow end. | | 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 animation-timing-function property of the element. | | CSS Version | CSS3 | * * * ## Related Articles CSS Reference: (#) * * Style Object](#)