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
Side to Side
Here we use
translateX() along with the
animation property and the
@keyframes rule to make the image bounce back and forth:
Up & Down
You can make the image bounce vertically by replacing
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.
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).
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 :)