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;
}
transition-timing-function

style > transition > transition-timing-functionEasing functions

🔎