Easing functions
transition-timing-function
Adjust the speed of a hover transition when it begins and ends to create smooth acceleration and deceleration effects.
Property values
One of these keyword values:
| keyword | description | equivalent function |
|---|---|---|
| linear | Constant time across the entire animation | cubic-bezier(0.0, 0.0, 1.0, 1.0) |
| ease | Slowly increase to the mid-point, then slowly decrease to the end-point | cubic-bezier(0.25, 0.1, 0.25, 1.0) |
| ease-in | A slow start and constant speed thereafter | cubic-bezier(0.42, 0, 1.0, 1.0) |
| ease-out | Begin with a constant speed and finish up slowly | cubic-bezier(0, 0, 0.58, 1.0) |
| ease-in-out | A slow start and a slow finish | cubic-bezier(0.42, 0, 0.58, 1.0) |
| steps(N) | Jump between states in N steps, each time incrementing 1/N of the total distance | |
| step-start | Jump immediately to the final state | |
| step-end | Stay at initial state until the animation duration has lapsed, then jump to the final state | |
| cubic-bezier(x1,y1,x2,y2) | Move from initial state (x1,y1) to the final state (x2,y2) |
Examples
#grow {
height: 100px;
transition-property: height;
transition-timing-function: ease-in-out;
}
#grow:hover {
height: 200px;
}