Skip to Content
Law of UX · Peak-End Rule

Smooth Exit Transitions

#transition (exit)peak-end

Add a short transition on state change so the end of an interaction feels intentional, not abrupt.

Why it works: Peak-End Rule — people judge an experience by peak and end; a polished exit transition improves perceived quality.

live_demo
code
.peak-card.with-exit {
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.peak-card.no-exit {
  transition: opacity 0.15s, box-shadow 0.15s;
}