Bouncing Image

There are two easy ways to add a bouncing image to a web page (without using JavaScript). These are:

HTML Bouncing Image

The HTML method of creating a bouncing image is by using the (non-standard) <marquee> tags.

See HTML Bouncing Image for more examples.

Source CodeResult
Cup of coffee on saucer

CSS Bouncing Image

You can also use CSS animations to create a bouncing image. In fact, this is the recommended method.

See CSS Bouncing Image for more examples.

Source CodeResult
Buzzy bee

HTML vs CSS

At first glance, the HTML <marquee> method might seem to be the better method to use when creating bouncing text and other marquee effects. It's easier to code, more intuitive, and seems to have pretty good browser support. It does however, have one major downfall — it is non standard HTML.

The <marquee> element is not actually included in the official HTML specifications. CSS animations on the other hand, are being written into the official CSS specifications. This means that, if being standards-compliant is important for you, CSS animations are the way to go. In this case, use the CSS Bouncing Image.

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 :)