Bounce Animation

Playful bounce animation for buttons, icons, or interactive elements. Creates a spring-like effect that feels responsive.

CSS7/16/2025

#css#animations#ui

CSS

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -20px, 0);
  }
  70% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  animation: bounce 1s ease-in-out;
}

...

Loading comments...