CSS3 transition-timing-function Property
Example
The transition effect proceeds at the same speed from start to end:
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers directly following -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 <br>4.0 -webkit- | 10.0 | 16.0 <br>4.0 -moz- | 6.1 <br>3.1 -webkit- | 12.1 <br>10.5 -o- |
Property 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 |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.transitionTimingFunction="linear" |
| --- | --- |
Syntax
| Value | Description |
|---|---|
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)). |
| ease | Specifies a transition effect with a slow start, then fast, then end slowly (cubic-bezier(0.25,0.1,0.25,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. |
Tip: Try the different values in the examples below to understand how it works!
More Examples
Example
To better understand different function values: Here are five different div elements, each with a different value:
Example
Same as the example above, but specifies a cubic-bezier curve for the speed curve: