This effect will let you create a bounce animation for any of your website assets -

Basic bounce

CSS Code

@keyframes bounce-basic {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce-basic 2s infinite;
}

Quick Bounce

CSS Code

@keyframes bounce-quick {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* To use Quick Bounce, change the animation name */
.bounce {
  animation: bounce-quick 1s infinite;
}

Slow Bounce

CSS Code

@keyframes bounce-slow {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* To use Slow Bounce, change the animation name */
.bounce {
  animation: bounce-slow 3s infinite;
}

High Bounce

CSS Code

@keyframes bounce-high {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-50px);
  }
  60% {
    transform: translateY(-25px);
  }
}

/* To use High Bounce, change the animation name */
.bounce {
  animation: bounce-high 2s infinite;
}

Low Bounce

CSS Code

@keyframes bounce-low {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-8px);
  }
}

/* To use Low Bounce, change the animation name */
.bounce {
  animation: bounce-low 2s infinite;
}

Easing Bounce

CSS Code

@keyframes bounce-easing {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
    animation-timing-function: ease-in;
  }
  60% {
    transform: translateY(-15px);
    animation-timing-function: ease-out;
  }
}

/* To use Easing Bounce, change the animation name */
.bounce {
  animation: bounce-easing 2s infinite;
}

Synchronized Bounce

CSS Code

@keyframes bounce-synchronized {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

/* To use Synchronized Bounce, change the animation name */
.bounce {
  animation: bounce-synchronized 2s infinite;
}

Delayed Bounce

CSS Code

@keyframes bounce-delayed {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* To use Delayed Bounce, change the animation name */
.bounce {
  animation: bounce-delayed 2s infinite;
  animation-delay: 4s;
}

Horizontal Bounce

CSS Code

@keyframes bounce-horizontal {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(30px);
  }
  60% {
    transform: translateX(15px);
  }
}

/* To use Horizontal Bounce, change the animation name */
.bounce {
  animation: bounce-horizontal 2s infinite;
}

Horizontal-Vertical Bounce

CSS Code

@keyframes bounce-combined {

0%, 20%, 50%, 80%, 100% {

transform: translate(0, 0);

}

40% {

transform: translate(30px, -30px);

}

60% {

transform: translate(15px, -15px);

}

}

/* To use Combined Bounce, change the animation name */

.bounce {

animation: bounce-combined 2s infinite;

}