The transition-timing-function property sets the acceleration curve a transition follows over its duration, controlling whether it speeds up, slows down, or moves at a constant rate throughout.

Syntax

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(...);

Deep Dive Course

ease, the default, starts somewhat quickly, slows through the middle, and eases gently into its final value, generally feeling like the most natural default for most UI transitions; linear moves at a perfectly constant rate throughout with no acceleration or deceleration at all, which can feel mechanical or robotic for many everyday UI interactions; ease-in starts slowly and accelerates toward the end; ease-out starts quickly and decelerates gently into its final value, often feeling like the most natural choice specifically for elements entering or appearing; and a custom cubic-bezier() function allows defining an entirely custom acceleration curve beyond these standard presets.

1Understanding Transition-timing-function

💡

ease-out generally feels like the most natural choice specifically for an element entering, appearing, or moving into place, since real-world motion typically decelerates as it settles into a final resting position, rather than maintaining constant speed or accelerating right up until it suddenly stops.

editor.html

.modal {
  transition: transform 0.3s ease-out;
}

localhost:3000

2Practical Example

Here is a real-world application of Transition-timing-function showing how it is used in production CSS code.

editor.html

.spinner {
  animation: spin 1s linear infinite;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Transition-timing-function:

1. Use ease-out for elements entering or appearing, since decelerating into a final position generally feels more natural than a constant or accelerating motion

2. Avoid linear for most everyday UI transitions, since a perfectly constant rate of change tends to feel mechanical rather than natural, reserving it more for specific effects like a continuously rotating loading spinner

3. Use a custom cubic-bezier() function for a specific, distinctive motion feel that the standard preset keywords don't quite capture

⚠️

Tip: ease-out generally feels like the most natural choice specifically for an element entering, appearing, or moving into place, since real-world motion typically decelerates as it settles into a final resting position, rather than maintaining constant speed or accelerating right up until it suddenly stops.

editor.html

.modal {
  transition: transform 0.3s ease-out;
}

localhost:3000

Examples

Example 01Basic Usage

.modal {
  transition: transform 0.3s ease-out;
}

Example 02Advanced Example

.spinner {
  animation: spin 1s linear infinite;
}

Best Practices

Use ease-out for elements entering or appearing, since decelerating into a final position generally feels more natural than a constant or accelerating motion
Avoid linear for most everyday UI transitions, since a perfectly constant rate of change tends to feel mechanical rather than natural, reserving it more for specific effects like a continuously rotating loading spinner
Use a custom cubic-bezier() function for a specific, distinctive motion feel that the standard preset keywords don't quite capture

Interview Question

Why does ease-out generally feel more natural than linear for an element that's animating into view or moving to a resting position?▼

Hint: Think about how objects in the real, physical world typically behave as they come to rest, compared to a perfectly constant, unchanging speed.

In the physical world, objects that come to rest, whether from friction, air resistance, or someone intentionally decelerating them, almost never travel at a perfectly constant speed right up until they abruptly stop, they instead naturally slow down gradually as they approach their final resting position, which is precisely the kind of motion ease-out is specifically designed to mimic, starting relatively quickly and then progressively decelerating into the final value. linear motion, by contrast, maintains that exact same constant speed all the way through, including right up to the very last instant before it stops completely, which reads as visually unnatural and somewhat mechanical or robotic to human perception, precisely because it doesn't match the deceleration pattern we're deeply accustomed to seeing in real, physical motion all around us. This is exactly why ease-out tends to feel more organic and pleasant specifically for elements entering, appearing, or settling into a final position, while linear is generally reserved for effects that are intentionally meant to feel mechanical or perfectly uniform, like a continuously rotating loading spinner with no natural resting point to decelerate into.

Exercises

MediumPractice using Transition-timing-function in a real scenario.

View Solution

.modal {
  transition: transform 0.3s ease-out;
}

Frequently Asked Questions

Why does ease-out generally feel more natural than linear for an element that's animating into view or moving to a resting position?▼

Related Functions

TransitionTransition-durationAnimation-timing-function