Create Infinite Bounce Effect with CSS3 Animation

Hi Guys, today we talk about CSS bouncing effect. Using CSS3 @keyframe & animation property, you can create bounce effect without using any javascript or jQuery. Take a look a little demo of Bouncing arrow effect using CSS3.

The HTML

Create a new HTML document and add the following markup inside body tag:

<div class="bounce"><i class="fa fa-angle-double-down"></i></div>

The CSS

Add following css in your document:

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);
 
.fa {
 width: 60px;
 display: block;
 text-align: center;
 color:#990000;
 font:normal 45px 'FontAwesome';
 line-height:60px;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
}
.fa-angle-double-down:before {content: "\f103";}
 
.bounce {
 position: absolute;
 bottom: 30px;
 left: 50% ;
 width: 60px;
 height: 60px ;
 margin-left:-30px;
 border: 2px solid #990000;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}
 
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

That’s all !! See the Result:

See the Pen Create Infinite Bounce Effect with CSS3 Animation by Web Mantras (@webmantras) on CodePen.dark