Fine-tuning CSS transitions with the transition-timing-function property

The transition-timing-function Property

Do you want your transition to start off slow and get faster, start off fast and end slower, advance at an even keel, jump through various steps, or even bounce? The transition-timing-function provides a way to control the pace of the transition. The transition-timing-function property describes how the transition proceeds as it is being executed.

transition-timing-function

Values:	<timing-function>#
Initial value:	ease
Applies to:	All elements, :before and :after pseudo-elements
Inherited:	No

The transition-timing-function values include ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(n, start)—where n is the number of steps—steps(n, end), and cubic-bezier(x1, y1, x2, y2). These values are also the valid values for the animation-timing-function.

The non-step keyword are easing timing functions employing cubic Bézier mathematical functions to provide smooth curves. The specification provides for five predefined easing functions, but you can describe your own precise timing function by defining your own cubic-bezier() function, as shown in Table 1-1.

Table 1-1. Supported keyterms for cubic Bézier timing functions

Timing function	Definition	cubic-bezier value
ease	Starts slow, then speeds up, then ends very slowly	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	Proceeds at the same speed throughout transition	cubic-bezier(0, 0, 1, 1)
ease-in	Starts slow, then speeds up	cubic-bezier(0.42, ...