CSS3 transition-timing-function property
May 06, 2021 CSS Reference Manual
Table of contents
CSS3 transition-timing-function property
Description of property definition and use
The transition-timing-function property specifies the speed at which the effect is switched.
This property allows a transition effect to change the speed of its duration.
| Default: | ease |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.transitionTimingFunction="linear" |
Grammar
| Value | Describe |
|---|---|
| linear | Specifies the transition effect (equal to cubic-bezier (0,0,1,1)) that starts and ends at the same speed. |
| ease | Specify the transition effect of starting slowly, then getting faster, and then ending slowly (0.25, 0.1, 0.25, 1). |
| ease-in | Specifies the transition effect that starts slowly (equal to cubic-bezier (0.42, 0, 1, 1)). |
| ease-out | Provides for a transition effect that ends slowly (equal to cubic-bezier (0,0,0.58,1)). |
| ease-in-out | Provides for transition effects that start and end 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. The possible values are values between 0 and 1. |
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| 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- |
The transition effect starts and ends at the same speed:
-webkit-transition-timing-function: linear; /* Safari and Chrome */
Try it out . . .
More instances
To better understand the different function values: here are five different div elements, with five different values:
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#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;}
Try it out . . .
As in the example above, but specify the velocity curve cubic Bezier curve function:
#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);}
/* Safari */
#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);}
Try it out . . .