Bouncing Image

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

HTML Bouncing Image — using the HTML <marquee> tag
CSS Bouncing Image — using the CSS animations (recommended)

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 Code	Result
<marquee behavior="alternate"> <img src="//www.html.am/images/html-codes/marquees/coffee.gif" width="150" height="108" alt="Cup of coffee on saucer"> </marquee>

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 Code	Result
<style style="text/css"> .horizontally { height: 100px; overflow: hidden; position: relative; } .horizontally .inner { position: absolute; width: 100%; height: 100%; text-align: center; /* Starting position / -moz-transform:translateX(40%); -webkit-transform:translateX(40%); transform:translateX(40%); / Apply animation to this element / -moz-animation: horizontally 5s linear infinite alternate; -webkit-animation: horizontally 5s linear infinite alternate; animation: horizontally 5s linear infinite alternate; } / Move it (define the animation) / @-moz-keyframes horizontally { 0% { -moz-transform: translateX(40%); } 100% { -moz-transform: translateX(-40%); } } @-webkit-keyframes horizontally { 0% { -webkit-transform: translateX(40%); } 100% { -webkit-transform: translateX(-40%); } } @keyframes horizontally { 0% { -moz-transform: translateX(40%); / Browser bug fix / -webkit-transform: translateX(40%); / Browser bug fix / transform: translateX(40%); } 100% { -moz-transform: translateX(-40%); / Browser bug fix / -webkit-transform: translateX(-40%); / Browser bug fix */ transform: translateX(-40%); } } </style> <div class="horizontally"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/bee.gif" alt="Buzzy bee"> </div> </div>

Source Code

Result

<style style="text/css">
.horizontally {
 height: 100px;	
 overflow: hidden;
 position: relative;
}
.horizontally .inner {
 position: absolute;
 width: 100%;
 height: 100%;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(40%);
 -webkit-transform:translateX(40%);	
 transform:translateX(40%);
 /* Apply animation to this element */	
 -moz-animation: horizontally 5s linear infinite alternate;
 -webkit-animation: horizontally 5s linear infinite alternate;
 animation: horizontally 5s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes horizontally {
 0%   { -moz-transform: translateX(40%); }
 100% { -moz-transform: translateX(-40%); }
}
@-webkit-keyframes horizontally {
 0%   { -webkit-transform: translateX(40%); }
 100% { -webkit-transform: translateX(-40%); }
}
@keyframes horizontally {
 0%   { 
 -moz-transform: translateX(40%); /* Browser bug fix */
 -webkit-transform: translateX(40%); /* Browser bug fix */
 transform: translateX(40%); 		
 }
 100% { 
 -moz-transform: translateX(-40%); /* Browser bug fix */
 -webkit-transform: translateX(-40%); /* Browser bug fix */
 transform: translateX(-40%); 
 }
}
</style>

<div class="horizontally">
<div class="inner">
<img src="//www.html.am/images/html-codes/marquees/bee.gif" alt="Buzzy bee">
</div>
</div>

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