CSS ease-in-out Easing Function

Understanding ease-in-out

The ease-in-out keyword is one of the five predefined CSS timing functions. It maps to cubic-bezier(0.42, 0, 0.58, 1) and produces a symmetric S-shaped curve.

The Curve

transition-timing-function: ease-in-out;
/* equivalent to: */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

The animation starts slowly (the curve is nearly flat at the beginning), accelerates through the midpoint, and then decelerates toward the end. This mirrors how objects behave in the physical world — they don't start or stop instantaneously.

When to Choose ease-in-out

Use case	Why it works
Fading elements in and out	The gradual start and end feel polished
Sliding panels	Symmetric acceleration looks balanced
State changes (e.g., toggle switches)	Natural motion between two states

Comparing with ease

The default ease function (cubic-bezier(0.25, 0.1, 0.25, 1)) is not symmetric — it decelerates more than it accelerates. ease-in-out is perfectly symmetric around the 50% mark, making it ideal when you want both the entry and exit to feel equally weighted.

Code Example

.panel {
  transition: transform 400ms ease-in-out;
}
.panel.open {
  transform: translateX(0);
}
.panel.closed {
  transform: translateX(-100%);
}

Because ease-in-out is a CSS keyword, you can also pass it directly to the Web Animations API:

element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 400, easing: 'ease-in-out' }
);