CSS Property: transition-timing-function
The acceleration and deceleration of a transition — the gradual change of appearance over time.
Possible Values
| Value | Description | Example |
|---|---|---|
ease | Quick acceleration followed by slow deceleration. Default. | |
linear | Constant speed throughout. | |
ease-in | Steady acceleration. | |
ease-out | Steady deceleration. | |
ease-in-out | Steady acceleration followed by steady deceleration. | |
cubic-bezier() | Precise timing function control, specifying a cubic bezier curve. It should contain four numbers — x1, y1, x2, y2. x1 and x2 should be between 0 and 1. | cubic-bezier(0.5,1.5,0.5,-0.5) |
steps() | Stepping function. The number of intervals the transition jumps through (rather than the smooth transitions of the previous values). It should contain an integer greater than zero which specifies the number of intervals. Optionally, it can also contain start or end to specify at what point in the interval the change of values should take place (defaults to start). | steps(5,end) |
step-start | The equivalent of steps(1, start). | |
step-end | The equivalent of steps(1, end). | |
[value], [value] | Multiple values can be separated by commas. These will match, in order, similarly listed items in other transition properties (such as transition-property). | linear, ease-in, ease-out |
inherit | ||
initial | ||
unset | ||
Example
a {
color: rgba(255,0,0,.5);
transition-property: color;
transition-duration: .3s;
transition-timing-function: linear;
}
/* A semi-transparent red link with a quick linear transition applied to the color property. */
a:hover {
color: rgba(255,0,0,1);
}
/* When hovered over, the color of the link will turn solid red at a constant speed. */