CSS Bounce Effect

To create a CSS bounce effect, you can use CSS animations and keyframes to simulate the bouncing motion. Here’s an example of a simple bounce effect using CSS:

HTML:

<div class="box"></div>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: #007bff; /* Replace with your desired color */
  position: relative;
  animation: bounce 1s infinite;
}

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

In this example, we create a simple square box with the class “box.” The bounce effect is achieved by using CSS animations and keyframes. The @keyframes rule defines the animation by specifying different stages of the animation.

In the keyframes, we define several keyframes with percentage values (from 0% to 100%) representing the different stages of the bounce animation. At each keyframe, we set the transform property to move the element vertically using translateY to create the bounce motion.

Adjust the animation duration, bounce height, and other properties as needed to customize the bounce effect according to your preferences. You can apply this technique to any HTML element you want to animate with a bounce effect.