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.


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


Add following css in your document:

That’s all !! See the Result:

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

14 thoughts on “Create Infinite Bounce Effect with CSS3 Animation

    1. Can you send me your URL that you have used layerswp theme?
      I think, CSS is running perfect on your applooney website.

    1. Hello, Thanks for your valuable comment!!
      If you click on it, you will scroll down another section & it move up automatically using scrollTo jquery.
      If you want to hide only, Use this:

Leave a Reply