Style transitionTimingFunction Property

Definition and Usage

transitionTimingFunction This property specifies the speed curve of the transition effect.

This property allows the transition effect to change its speed during its duration.

See Also:

CSS Reference Manual:transition-timing-function property

Example

Change the speed curve of the transition effect:

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

Try It Yourself

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 Value

Value Description
ease

Default value. Specifies a transition effect that starts slowly, then quickly, and then ends slowly.

Is equivalent to: cubic-bezier(0.25, 0.1, 0.25, 1).
linear

Specifies a transition effect with the same speed from start to end.

Is equivalent to: cubic-bezier(0, 0, 1, 1).
ease-in

Specifies a transition effect that starts slowly.

Is equivalent to: cubic-bezier(0.42, 0, 1, 1).
ease-out

Specifies a transition effect that ends slowly.

Is equivalent to: cubic-bezier(0, 0, 0.58, 1).
ease-in-out

Specifies a transition effect that starts and ends slowly.

Is 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 initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default value: ease
Return value: A string that represents the element's transition-timing-function property.
CSS Version: CSS3

Browser Support

The numbers in the table indicate the browser version that first fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1