What does the transition-timing-function property do?

CSSJunior~1 min read

transition-timing-function defines the pacing curve along which the smooth transition happens: whether it is uniform, slows down, speeds up, and so on.

Main values:

javascript

ease        - smooth acceleration and deceleration (the default value)
linear      - uniform speed from start to end
ease-in     - slow at the start, faster toward the end
ease-out    - fast at the start, slower toward the end
ease-in-out - slow at the start and end, faster in the middle

Cubic Bezier curves can also be used:

javascript

transition-timing-function: cubic-bezier(.25, .1, .25, 1);

Summary: the property defines exactly how the animation's speed changes during the transition: uniformly or with acceleration/deceleration.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.