Example of CSS Bounce Effect

INTRODUCTION

CSS bounce effect is a popular animation technique used in websites to create engaging and interactive websites. This effect is used to make elements on the page bounce or move in a way that simulates a physical bounce.

In this article, we will explore the CSS bounce effect, how it works and how to implement it in your web projects.

How does the CSS bounce effect work?

The CSS bounce effect is achieved by using keyframe animations. Keyframes allow you to define specific points in the animation where certain properties of the element being animated will change. For example, you can define a keyframe at the beginning of the animation where the element is in its original position, and another keyframe at the end of the animation where the element has moved to its final position.

Here is the bounce effect using CSS and HTML:

<!-- Element bouncing-->
<div class="element"></div>

<!--CSS-->
<style>
  .element {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    animation: bounce 1s infinite;
    }
    @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
    }
    40% {
    transform: translateY(-30px);
    }
    60% {
    transform: translateY(-15px);
    }
  }
</style>

In this example, we are defining five keyframes for the animation. The first keyframe (0%) sets the element's initial position, while the next four keyframes (20%, 50%, 80%, 100%) define the movement of the element as it bounces up and down.

The second keyframe (40%) defines the highest point of the bounce, where the element is translated upward by 30 pixels. The third keyframe (60%) defines the point where the element starts to descend, and it is translated upward by 15 pixels.

Conclusion

In this brief guide we have created most used animation called bounce effect in web pages to improve interaction in a website using CSS animations and keyframes.

Thank you for reading.