CSS · Motion and transforms

transition-timing-function

The acceleration curve. ease-out feels responsive for entrances and hover states.

cssRunnable example css course

Syntax

transition-timing-function: ease-out

Example

Try it

.demo { transition: transform 220ms cubic-bezier(.2,.8,.2,1); } .demo:hover { transform: translateX(6px); }

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.