Subtle Ease — The Default CSS ease Function

The Default ease Function

When you write transition: opacity 300ms without specifying a timing function, CSS uses ease — which is cubic-bezier(0.25, 0.1, 0.25, 1). It's the most commonly used easing in web development, whether intentionally or by default.

The Curve Shape

transition-timing-function: ease;
/* equivalent to: */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

The curve accelerates quickly at the start and decelerates gently toward the end. Unlike ease-in-out, it is asymmetric — the deceleration phase is longer and more pronounced than the acceleration phase. This means the animation spends more time "landing" than "launching."

Why ease Is the Default

The asymmetric profile matches how we expect UI elements to behave. When you hover over a button, the color change should feel responsive (fast start) and settle smoothly (slow end). The quick start provides a sense of immediacy, while the gradual finish avoids an abrupt stop.

Comparison Table

Function	cubic-bezier	Character
ease	(0.25, 0.1, 0.25, 1)	Quick start, slow end
ease-in-out	(0.42, 0, 0.58, 1)	Symmetric S-curve
ease-out	(0, 0, 0.58, 1)	Instant start, slow end

Code Example

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

For most hover effects and small state changes, the default ease is an excellent choice because it feels snappy yet smooth.