Create Infinite Bounce Effect with CSS3 Animation

Using CSS3 @keyframe & animation property, you can create bounce effect without using any javascript. 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:

[code lang=”html”]<div class="bounce"><i class="fa fa-angle-double-down"></i></div>[/code]

The CSS

Add following css in your document:
[css]@import url(http://weloveiconfonts.com/api/?family=fontawesome);

.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);}
}
[/css]

That’s all !! See the Result:

See the Pen azWJOB by Mukesh Suthar (@designermukesh) on CodePen.11525

Comments

  1. That’s Great ..

  2. Nikita Nikolski says:

    Thanks!

  3. Thanks Sir šŸ™‚

  4. Rucha Warhekar says:

    Thank you… šŸ™‚

  5. Andre says:

    Thanks so much for this code snippet!

  6. Cesar says:

    Great job! Thanks a lot for share šŸ™‚

  7. Dylan says:

    Great code. Thank you for taking the time to share

  8. Thank you. its very cool.

  9. Vish says:

    Yup ! Good one šŸ™‚ šŸ™‚

  10. Web-Raketa says:

    Super! I like it!

Leave a Reply

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