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

Comments

  1. Luis says:

    I was looking to learn more about this

    1. Web Mantras says:

      What you want to learn more? Please fill Contact form for more details.
      https://www.blog.webmantras.com/contact/

  2. Dan Ashiwaju says:

    Works perfectly well for me…thanks

  3. That’s Great ..

  4. Nikita Nikolski says:

    Thanks!

  5. Rucha Warhekar says:

    Thank you… 🙂

  6. Andre says:

    Thanks so much for this code snippet!

  7. Cesar says:

    Great job! Thanks a lot for share 🙂

  8. Dylan says:

    Great code. Thank you for taking the time to share

  9. Thank you. its very cool.

  10. Vish says:

    Yup ! Good one 🙂 🙂

  11. Web-Raketa says:

    Super! I like it!

Leave a Reply

Your email address will not be published. Required fields are marked *