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.


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.dark


  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.

  2. Dan Ashiwaju says:

    Works perfectly well for me…thanks

  3. That’s Great ..

  4. Nikita Nikolski says:


  5. Thanks Sir πŸ™‚

  6. Rucha Warhekar says:

    Thank you… πŸ™‚

  7. Andre says:

    Thanks so much for this code snippet!

  8. Cesar says:

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

  9. Dylan says:

    Great code. Thank you for taking the time to share

  10. Thank you. its very cool.

  11. Vish says:

    Yup ! Good one πŸ™‚ πŸ™‚

  12. Web-Raketa says:

    Super! I like it!

Leave a Reply

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