Bouncing Text

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

HTML Bouncing Text — using the HTML <marquee> tag
CSS Bouncing Text — using the CSS animations

HTML Bouncing Text

This method uses the (non-standard) HTML <marquee> tag to create the bouncing text effect.

See HTML Bouncing Text for more examples.

Source Code	Result
<marquee behavior="alternate">Bouncing text...</marquee>	Bouncing text...

CSS Bouncing Text

This method uses CSS animations to create bouncing text. This is the recommended method.

See CSS Bouncing Text for more examples.

Source Code	Result
<style style="text/css"> .horizontally { height: 50px; overflow: hidden; position: relative; background: yellow; color: orange; border: 1px solid orange; } .horizontally p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position / -moz-transform:translateX(50%); -webkit-transform:translateX(50%); transform:translateX(50%); / 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(50%); } 100% { -moz-transform: translateX(-50%); } } @-webkit-keyframes horizontally { 0% { -webkit-transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); } } @keyframes horizontally { 0% { -moz-transform: translateX(50%); / Browser bug fix / -webkit-transform: translateX(50%); / Browser bug fix / transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); / Browser bug fix / -webkit-transform: translateX(-50%); / Browser bug fix */ transform: translateX(-50%); } } </style> <div class="horizontally"> <p>Horizontal bounce... </p> </div>	Horizontal bounce...

Source Code

Result

<style style="text/css">
.horizontally {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.horizontally p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(50%);
 -webkit-transform:translateX(50%);	
 transform:translateX(50%);
 /* 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(50%); }
 100% { -moz-transform: translateX(-50%); }
}
@-webkit-keyframes horizontally {
 0%   { -webkit-transform: translateX(50%); }
 100% { -webkit-transform: translateX(-50%); }
}
@keyframes horizontally {
 0%   { 
 -moz-transform: translateX(50%); /* Browser bug fix */
 -webkit-transform: translateX(50%); /* Browser bug fix */
 transform: translateX(50%); 		
 }
 100% { 
 -moz-transform: translateX(-50%); /* Browser bug fix */
 -webkit-transform: translateX(-50%); /* Browser bug fix */
 transform: translateX(-50%); 
 }
}
</style>

<div class="horizontally">
<p>Horizontal bounce... </p>
</div>

Horizontal bounce...

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