Timing Functions in CSS
From the CSS Animations cheat sheet · CSS Transitions · verified Jul 2026
Timing Functions
Control the speed curve and acceleration of transitions
css
/* Predefined timing functions */
transition-timing-function: ease; /* slow-fast-slow */
transition-timing-function: linear; /* constant speed */
transition-timing-function: ease-in; /* slow start */
transition-timing-function: ease-out; /* slow end */
transition-timing-function: ease-in-out;/* slow start and end */
/* Custom cubic bezier */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);💡 ease is the default timing function
⚡ Use cubic-bezier() for custom easing curves
📌 steps() creates frame-by-frame animations
🎯 linear works best for continuous rotations
Continue with CSS Animations
Save the full cheat sheet or work through every related task.