92. Transition Timing Function and Delay

Beyond duration, we control the speed curve of the transition and when it starts.

3. `transition-timing-function`

Defines the acceleration curve of the transition, making it appear more natural.

Value	Description
`ease` (default)	Slow start, fast middle, slow end (most natural).
`linear`	Same speed from start to end.
`ease-in`	Slow start.
`ease-out`	Slow end.
`ease-in-out`	Slow start and slow end.
`cubic-bezier(...)`	Custom speed curve (advanced).

css .box { transition-timing-function: ease-in-out; }

Defines how long to wait before starting the transition (in s or ms).

css .delayed-action:hover { /* Wait 200ms before starting the transition */ transition-delay: 200ms; }

It is best practice to use the transition shorthand property.

transition: <property> <duration> <timing-function> <delay>;

css .smooth-item { /* Transitions all properties over 0.3 seconds, easing in and out */ transition: all 0.3s ease-in-out 0s; }

.multiple-transition { /* Transition opacity over 0.2s, then transition color over 0.5s */ transition: opacity 0.2s, color 0.5s; }