CSS3 transition-timing-function Property


Example

A transition effect with the same speed from start to end:

div {
    -webkit-transition-timing-function: linear; /* Safari and Chrome */
    transition-timing-function: linear;
}

Try it yourself »

Definition and Usage

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

This property allows a transition effect to change speed over its duration.

Default value: ease
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transitionTimingFunction="linear" Try it

Browser Support

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

Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.

Property
transition-timing-function 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit- 
12.1
10.5 -o-

CSS Syntax

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit;

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) 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. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Tip: Try the different values in the examples below to understand how it works!


Examples

More Examples

Example

To better understand the different function values: Here are five different div elements with five different values:

/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */
#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

Same as the example above, but the speed curves are specified with the cubic-bezier function:

/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Standard syntax */
#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 »

Related Pages

CSS tutorial: CSS3 Transitions

HTML DOM reference: transitionTimingFunction property



SHARE THIS PAGE

COLOR PICKER

colorpicker