Timing Functions
The timing function controls the acceleration curve of the transition. Built-in options include ease, linear, ease-in, ease-out, ease-in-out, and steps().
CSS
Intermediate
5 min read
Transition Timing Functions
Example
.ease { transition-timing-function: ease; } /* default */
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out{ transition-timing-function: ease-in-out; }
/* Custom cubic-bezier */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } Pro Tip
Use cubic-bezier.com to design and preview custom timing curves visually before adding them to your CSS.