Easy Tutorial
❮ Prop Nav Appname Jsref Forin ❯

Style transitionTimingFunction Property

Style Object

Example

Change the speed curve of the transition effect:


Definition and Usage

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

This property allows the transition effect to change its speed over time.


Browser Support

Internet Explorer 10, Firefox, Opera, and Chrome support the transitionTimingFunction property.

Safari supports an alternative property, WebkitTransitionTimingFunction.

Note: Internet Explorer 9 and earlier versions do not support the transitionTimingFunction property.


Syntax

Return the transitionTimingFunction property:

Set the transitionTimingFunction property:

Property Values

Value Description
ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)).
linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)).
ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)).
ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)).
ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n, n, n, n) Defines 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 transition-timing-function property of the element.
--- ---
CSS version CSS3
--- ---

Related Articles

CSS Reference: transition-timing-function Property


Style Object

❮ Prop Nav Appname Jsref Forin ❯