#### 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) |