Style animationTimingFunction Property
Style ObjectExamples
Change the animationTimingFunction property of a <div> element:
document.getElementById("myDIV").style.animationTimingFunction="linear";
Try it yourself »
Definition and Usage
The animationTimingFunction specifies the speed curve of an animation.
The speed curve defines the time an animation uses to change from one set of CSS styles to another.
The speed curve is used to make the animation change smoothly.
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 keeps the same speed from start to end. |
| ease | Default value. The animation has a slow start, then accelerates, and slows down again before the end. |
| ease-in | The animation has a slow start. |
| ease-out | The animation has a slow end. |
| ease-in-out | The animation has both a slow start and a slow end. |
| cubic-bezier(n,n,n,n) | Define your own value in the cubic-bezier function. It can be a numeric value between 0 and 1. |
| initial | Set this property to its default value. Seeinitial。 |
| inherit | Inherit this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | ease |
|---|---|
| Return value: | A string representing the element's animation-timing-function property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference:animation-timing-function property
Other Extensions