Property Description
The transition-timing-function property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated.
This easing function is specified using a cubic Bezier curve defined by four control points; the first and last of these are predefined to be (0, 0) and (1, 1). This property lets you define the values of the other two points, either using keywords to set them to predefined values, or to custom values.
This property has the following syntax:
transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit
Property Values
| Value | Description |
|---|---|
| ease | Specifies the easing function to cubic-bezier(0.25, 0.1, 0.25, 1.0) |
| linear | Specifies the easing function to cubic-bezier(0.0, 0.0, 1.0, 1.0) |
| ease-in | Specifies the easing function to cubic-bezier(0.42, 0.0, 1.0, 1.0) |
| ease-out | Specifies the easing function to cubic-bezier(0.0, 0.0, 0.58, 1.0) |
| ease-in-out | Specifies the easing function to cubic-bezier(0.42, 0.0, 0.58, 1.0) |
| ease-bezier | Specifies a cubic bezier curve to use as the easing function. The four number values specify the P1 and P2 points of the curve as (x1, y1, x2, y2). All values must be in the range [0.0, 1.0] inclusive |
| cubic-bezier(n,n,n,n) | Specifies a custom cubic bezier function. Possible values are from 0 to 1 |
| initial | Specifies that the value of the property should be set to the default value |
| inherit | Specifies that the value of the property should be inherited from the parent element |
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 26
4.0 -webkit- |
16
4.0 -moz- |
10.0 | 6.1
3.1 -webkit- |
12.1
10.5 -o- |
Miscellaneous Information
| Inherited: | No |
|---|---|
| Defined In: | Mozilla Specific |
| Default Value: | ease |
