Smooth Decelerate Easing for UI Transitions

Smooth Deceleration Curve

While ease-out (cubic-bezier(0, 0, 0.58, 1)) provides basic deceleration, a custom curve can achieve a smoother, more refined slowdown that makes transitions feel premium.

The Values

transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

This curve starts moderately fast and then has an extended, very gradual deceleration phase. The y1 value of 1 means the first control point is at the maximum height, creating a curve that reaches near-full progress early and then eases very slowly into the final value.

Comparison with Standard ease-out

ease-out:          |████████████████░░░░|  (abrupt slowdown)
smooth-decelerate: |████████████░░░░░░░░|  (gradual slowdown)

The smooth decelerate curve spends more time in the final 10-20% of the animation, creating a feeling of weight and elegance.

Code Example

.card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card.visible {
  opacity: 1;
  transform: translateY(0);
}

Staggered Entrance Pattern

This curve works exceptionally well with staggered animations where multiple elements enter sequentially:

.card:nth-child(1) { transition-delay: 0ms; }
.card:nth-child(2) { transition-delay: 50ms; }
.card:nth-child(3) { transition-delay: 100ms; }
.card:nth-child(4) { transition-delay: 150ms; }

The gradual deceleration prevents the staggered elements from feeling like they are "snapping" into place, instead giving each one a luxurious, weighted landing.