Create CSS Bounce Effect with CSS3 Animation

In this tutorial, we are going to create  CSS bounce effect. The main CSS code for giving the animation effect is the part of CSS3, which is the modern version of CSS that can create the animation effect to elements.

Now let’s get started.

At first, create our HTML element:

<div class="bounce-element"></div>

Now below is the CSS3 code where we have set the keyframes rules for animation:

@-webkit-keyframes bounce { 
   0%, 20%, 55%, 75%, 100% {-webkit-transform: translateY(0);} 
   40% {-webkit-transform: translateY(-45px);} 
   60% {-webkit-transform: translateY(-35px);} 
} 

@keyframes bounce { 
   0%, 20%, 55%, 75%, 100% {-webkit-transform: translateY(0);} 
   40% {-webkit-transform: translateY(-45px);} 
   60% {-webkit-transform: translateY(-35px);} 
}

CSS3 keyframes rules can set the rule for animation. In the above keyframes rule, we have set the CSS transform property and we use the translateY to move it around theY-axis so that it can give the bounce effect to our HTML element.

To learn about CSS keyframes animation read this post – Learn CSS Animation Effect – CSS3 Animations On Website.

After 40%, it will move around -45px of Y-axis and after 60% 35px. Thus we can see the CSS bounce effect when we apply our animation in our HTML.

Now, below is the CSS code for our HTML element to give it the bounce effect:

.bounce-element { 
	background-color: green;
	width: 150px;
	height: 55px;
   -webkit-animation-name: bounce; 
   animation-name: bounce; 
   -webkit-animation-duration: 1.3s;
   animation-duration: 1.3s; 
   -webkit-animation-fill-mode: both; 
   animation-fill-mode: both; 
}

In the above CSS code, you can see that we have declared the animation name that we created with keyframes. The animation-duration property you can see is to set the time for how long time it will be stay. Here in our example, we have set the animation duration 1.3s. So we can see the bounce effect stays for 1.3 seconds.

The CSS code to the element also contains the height and width with the green background. It makes a rectangular shape with width 150px and height 55px that we can see bouncing.

You can now run the code on your browser and you will see the CSS bounce effect of the green rectangle that stays for 1.3 seconds.

So we have successfully created our bounce effect using CSS3. I hope, you enjoyed this tutorial.