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 Code

Result

<style> .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>

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 Code

Result

<style> .vertically { height: 300px; overflow: hidden; position: relative; } .vertically .inner { position: absolute; width: 100%; height: 100%; /* Starting position */ -moz-transform:translateY(40%); -webkit-transform:translateY(40%); transform:translateY(40%); /* Apply animation to this element */ -moz-animation: vertically 5s linear infinite alternate; -webkit-animation: vertically 5s linear infinite alternate; animation: vertically 5s linear infinite alternate; } /* Move it (define the animation) */ @-moz-keyframes vertically { 0% { -moz-transform: translateY(70%); } 100% { -moz-transform: translateY(0%); } } @-webkit-keyframes vertically { 0% { -webkit-transform: translateY(70%); } 100% { -webkit-transform: translateY(0%); } } @keyframes vertically { 0% { -moz-transform: translateY(70%); /* Browser bug fix */ -webkit-transform: translateY(70%); /* Browser bug fix */ transform: translateY(70%); } 100% { -moz-transform: translateY(0%); /* Browser bug fix */ -webkit-transform: translateY(0%); /* Browser bug fix */ transform: translateY(0%); } } </style> <div class="vertically"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/bee.gif" alt="Buzzy bee"> </div> </div>

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 Code

Result

<style> .faster { height: 100px; overflow: hidden; position: relative; } .faster .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: faster 2s linear infinite alternate; -webkit-animation: faster 2s linear infinite alternate; animation: faster 2s linear infinite alternate; } /* Move it (define the animation) */ @-moz-keyframes faster { 0% { -moz-transform: translateX(40%); } 100% { -moz-transform: translateX(-40%); } } @-webkit-keyframes faster { 0% { -webkit-transform: translateX(40%); } 100% { -webkit-transform: translateX(-40%); } } @keyframes faster { 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="faster"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/bee.gif" alt="Buzzy bee"> </div> </div>

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:

• HTML Marquee
• CSS Marquee
• Scrolling Text
• Slide-In Text
• Bouncing Text
• Scrolling Image
• Slide-In Image
• Bouncing Image

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