CSS Bouncing Image

You can use CSS animations to create a bouncing image. CSS animations are recommended over the HTML version, as they are being introduced into the official CSS specifications (the HTML version uses non-standard HTML markup to achieve the bouncing effect).

Note that the examples below use vendor extensions as well as a little browser fix. To make this standards compliant, you will need to remove all vendor extensions (i.e. the ones that start with -moz- and -webkit-).

Side to Side

Here we use translateX() along with the animation property and the @keyframes rule to make the image bounce back and forth:

Source CodeResult
Buzzy bee

Up & Down

You can make the image bounce vertically by replacing translateX() with translateY() and modifying their values. Here, we've also set the height of the outer <div>. We've also removed text-align: center but this is optional.

Source CodeResult
Buzzy bee

Changing the Speed

To change the speed, replace 5s with another value (5s means that it takes 5 seconds for the animation to complete 1 iteration). In this example, we've changed the value to 2s which causes the animation to speed up (i.e. taking 2 seconds to complete each iteration).

Source CodeResult
Buzzy bee

More Marquee Codes

You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:

Marquee Generator

Also check out the Marquee Generator.

Marquee Usability

Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)

About HTML.support

HTML.support was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.support aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site HOSTEK provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!