CSS transition-timing-function property

Definition and usage

The transition-timing-function attribute specifies the speed curve of the transition effect.

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

See also:

CSS Tutorial:CSS Transition

HTML DOM Reference Manual:transitionTimingFunction attribute

Instance

Example 1

Transition effects that start and end at the same speed:

div
{
transition-timing-function: linear;
}

Try It Yourself

CSS syntax

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Attribute value

Value Description
linear Specify a transition effect that starts and ends at the same speed (equal to cubic-bezier(0,0,1,1)).
ease Specify a transition effect that starts slowly, then speeds up, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Specify a transition effect that starts slowly (equal to cubic-bezier(0.42,0,1,1)).
ease-out Specify a transition effect that ends slowly (equal to cubic-bezier(0,0,0.58,1)).
ease-in-out Specify a transition effect that starts and ends slowly (equal 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 between 0 and 1.

Tip:Please test different values in the examples to better understand their working principles.

Technical Details

Default Value: ease
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.transitionTimingFunction="linear"

More Examples

Example 2

To better understand different function values, please see the five different div elements with five different values below:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Try It Yourself

Example 3

As in the previous example, but the speed curve is specified using cubic-bezier:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Try It Yourself

Browser Support

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

Numbers with -webkit-, -moz-, or -o- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-