- HTML Bouncing Image — using the HTML
- CSS Bouncing Image — using the CSS animations (recommended)
The HTML method of creating a bouncing image is by using the (non-standard)
See HTML Bouncing Image for more examples.
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.
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.
<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:
Also check out the Marquee Generator.
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 :)