Checkbox Bounce Animation

This checkbox bounce animation adds playful motion when toggled, ideal for modern and friendly UI designs.

HTML

<label class="ss-check bounce">
  <input type="checkbox">
  <span></span>
  Accept
</label>

<label class="ss-check bounce">
  <input type="checkbox">
  <span></span>
  Accept
</label>

CSS

.ss-check.bounce input:checked + span{
  animation:bounce .3s;
}

@keyframes bounce{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.3); }
  100%{ transform:scale(1); }
}

.ss-check.bounce input:checked + span{
  animation:bounce .3s;
}

@keyframes bounce{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.3); }
  100%{ transform:scale(1); }
}

Notes

• Fun bounce effect
• Improves feedback
• Minimal animation

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.