CSS Transition Timing Functions Compared — ease vs linear vs ease-in-out

Timing Functions Compared

CSS provides five built-in timing function keywords, each producing a different animation feel. Choosing the right one is critical for natural-feeling transitions.

The Five Built-In Curves

linear — cubic-bezier(0, 0, 1, 1) Constant speed from start to finish. The element moves at the same velocity throughout. Rarely feels natural for UI transitions, but works well for progress bars, loading indicators, and continuous animations.

ease — cubic-bezier(0.25, 0.1, 0.25, 1) The default timing function. Quick start, slow finish. Good all-purpose choice for most transitions.

ease-in — cubic-bezier(0.42, 0, 1, 1) Slow start, fast finish. The animation builds momentum. Best for exit animations where elements leave the viewport.

ease-out — cubic-bezier(0, 0, 0.58, 1) Fast start, slow finish. The animation decelerates naturally. Best for entrance animations where elements come into view.

ease-in-out — cubic-bezier(0.42, 0, 0.58, 1) Slow start, fast middle, slow finish. Symmetrical acceleration. Best for transitions where the element stays on screen (e.g., color changes, position shifts).

Practical Recommendations

/* Entrance (element appearing) */
.modal-enter { transition: transform 0.3s ease-out; }

/* Exit (element disappearing) */
.modal-exit { transition: transform 0.2s ease-in; }

/* State change (element stays visible) */
.button:hover { transition: background-color 0.2s ease-in-out; }

/* Progress indicators */
.progress-bar { transition: width 0.5s linear; }

The UX Principle

Matching the timing function to the animation direction creates natural-feeling motion:

• Objects entering the screen are already in motion (fast start) and come to rest (slow end) = ease-out
• Objects leaving the screen start from rest (slow start) and accelerate away (fast end) = ease-in
• Objects changing in place have symmetrical motion = ease-in-out