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 Create Infinite Bounce Effect with CSS3 Animation by Web Mantras (@webmantras) on CodePen.light


  1. Dan Ashiwaju says:

    Works perfectly well for me…thanks

  2. That’s Great ..

  3. Nikita Nikolski says:


  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 *