← Back to gallery
CSS

Notification Badge Bounce Retrigger

A transform-based badge pop that replays on every count change by keyed remount, with reduced-motion collapsing the bounce to an instant swap.

Duration
1s
Resolution
1440×900
Format
CSS
notification-badgebouncecount-popretriggerreduced-motion

Feedback / transform scale / retrigger

Notification badge bounce retrigger

Reimplements the classic notification badge pop so it replays on every count change by keying the node to the count, with transform-only motion and a reduced-motion instant swap.

inbox — scale 1.25x, 0.42s cycle
3

Subtle shoulder pop

Inbox

A tight 1.25x scale bounce on the envelope badge signals new unread messages without yanking attention away from the rest of the sidebar.

  • inbox
  • small scale
  • high frequency
2

Confident purchase pop

Cart

A heavier 1.45x bounce paired with a softer settle conveys confidence when an item lands in the cart and the count ticks up.

  • cart
  • add to cart
  • warm settle
9

Tall notifications flip

Bell

A 1.35x bounce with an exaggerated overshoot feels right when the notifications bell gains a new alert and the count needs to read high.

  • bell
  • alerts
  • overshoot

Badge inspector

Inbox

3
Peak scale
1.25x
Cycle
0.42s

Suited to high-frequency updates like email rows — the pop is quick and returns to rest before the user finishes scanning adjacent items.

css
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.95);
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  transform-origin: center;
}

.badge--animating {
  animation: badgePop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .badge--animating { animation: none; }
}