Style animationTimingFunction Property

Definition and Usage

animationTimingFunction Specify the animation's speed curve.

Speed curves define the time it takes for an animation to change from one set of CSS styles to another.

Speed curves are used for smooth changes.

Example

Change the animationTimingFunction property of the <div> element:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

Try It Yourself

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 Value

Value Description
linear The speed of the animation is the same from start to finish.
ease Default value. The animation starts slowly, then speeds up, and then ends slowly.
ease-in The animation starts slowly.
ease-out The animation ends slowly.
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 initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default value: ease
Return value: String representing the element's animation-timing-function Attribute.
CSS Version: CSS3

Browser support

animationTimingFunction Is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support 11

Related Page

CSS Reference Manual:animation-timing-function Attribute