CSS Bouncing Text

You can create bouncing text using CSS animations. This achieves the same effect as the HTML version with the added benefit that CSS animations are being included in the official CSS specification (so it's standard compliant).

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() to make our text bounce horizontally.

Source Code	Result
<style> .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>
.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...

Up & Down

Here we use translateY() to make our text bounce vertically:

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

Source Code

Result

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

<div class="vertically">
<p>Vertical bounce... </p>
</div>

Vertical bounce...

Changing the Speed

To change the speed of your bouncing text, change 5s to some other value. Let's change it to 1s (which means it will take 1 second for the animation to make one iteration).

Source Code	Result
<style> .fast { height: 50px; overflow: hidden; position: relative; background: yellow; color: orange; border: 1px solid orange; } .fast p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position / -moz-transform:translateY(50%); -webkit-transform:translateY(50%); transform:translateY(50%); / Apply animation to this element / -moz-animation: fast 1s linear infinite alternate; -webkit-animation: fast 1s linear infinite alternate; animation: fast 1s linear infinite alternate; } / Move it (define the animation) / @-moz-keyframes fast { 0% { -moz-transform: translateY(50%); } 100% { -moz-transform: translateY(-50%); } } @-webkit-keyframes fast { 0% { -webkit-transform: translateY(50%); } 100% { -webkit-transform: translateY(-50%); } } @keyframes fast { 0% { -moz-transform: translateY(50%); / Browser bug fix / -webkit-transform: translateY(50%); / Browser bug fix / transform: translateY(50%); } 100% { -moz-transform: translateY(-50%); / Browser bug fix / -webkit-transform: translateY(-50%); / Browser bug fix */ transform: translateY(-50%); } } </style> <div class="fast"> <p>Fast bounce... </p> </div>	Fast bounce...

Source Code

Result

<style>
.fast {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.fast p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(50%);
 -webkit-transform:translateY(50%);	
 transform:translateY(50%);
 /* Apply animation to this element */	
 -moz-animation: fast 1s linear infinite alternate;
 -webkit-animation: fast 1s linear infinite alternate;
 animation: fast 1s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes fast {
 0%   { -moz-transform: translateY(50%); }
 100% { -moz-transform: translateY(-50%); }
}
@-webkit-keyframes fast {
 0%   { -webkit-transform: translateY(50%); }
 100% { -webkit-transform: translateY(-50%); }
}
@keyframes fast {
 0%   { 
 -moz-transform: translateY(50%); /* Browser bug fix */
 -webkit-transform: translateY(50%); /* Browser bug fix */
 transform: translateY(50%); 		
 }
 100% { 
 -moz-transform: translateY(-50%); /* Browser bug fix */
 -webkit-transform: translateY(-50%); /* Browser bug fix */
 transform: translateY(-50%); 
 }
}
</style>

<div class="fast">
<p>Fast bounce... </p>
</div>

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