Easy Tutorial
❮ Event Ononline Prop Url Name ❯

Style animationTimingFunction Property

Style Object

Example

Change the animationTimingFunction property of a <div> element:


Definition and Usage

The animationTimingFunction specifies the speed curve of the animation.

The speed curve defines the timing of animation transitions from one set of CSS styles to another.

The speed curve is used to make the animation changes smooth.


Browser Support

Only Firefox supports the animationTimingFunction property.


Syntax

Return the animationTimingFunction property:

Set the animationTimingFunction property:

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, before it ends slowly.
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 values in the cubic-bezier function. <br>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 animation-timing-function property of the element.
--- ---
CSS Version CSS3
--- ---

Related Articles

CSS Reference: animation-timing-function Property


Style Object

❮ Event Ononline Prop Url Name ❯