CSS Scrolling Text

This page uses CSS animations for creating scrolling text. This method has many benefits over the HTML method for creating scrolling text. The main benefit being that CSS animations are being included in the CSS specifications (as from CSS3) and will therefore be standards-compliant (unlike the HTML marquee element, which is non-standard).

Right to Left

Here we make the text scroll from right to left. The actual animation is done using the animation property and @keyframes rule. We also use vendor prefixes in these examples (eg -webkit- and -moz-). We add the browser prefixes in order to get the marquee working cross-browser. To make the code fully W3C compliant, omit the vendor prefixes (although note that this could prevent it from working in some browsers).

Here is the code and its result:

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

Source Code

Result

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

<div class="scroll-left">
<p>Scroll left... </p>
</div>

Scroll left...

Left to Right

To scroll from left to right, we simply switch the values of translateX() around so that 100% becomes -100% and vice-versa. We've also set the starting position to -100% and changed the class and animation names to scroll-right (but these could be any name you like). All other code can remain the same:

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

Source Code

Result

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

<div class="scroll-right">
<p>Scroll right... </p>
</div>

Scroll right...

Speed

The animation property allows you to determine the speed at which your text scrolls. The above examples use 15s which means that it will take 15 seconds for the animation to complete. You can slow down the marquee by using a higher number, or speed it up using a lower number. Let's slow it down by changing the value to 25s:

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

Source Code

Result

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

<div class="scroll-slow">
<p>Scroll slow... </p>
</div>

Scroll slow...

Scroll Up

To make the text scroll up, we replace translateX() with translateY() and adjust the values to suit. I've also changed the scroll speed to 5s in order to speed up the marquee:

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

Source Code

Result

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

<div class="scroll-up">
<p>Scroll up... </p>
</div>

Scroll up...

Scroll Down

To make the text scroll down we use translateY() as with scrolling up, but we switch the values around (i.e. -100% becomes 100% and vice versa):

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

Source Code

Result

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

<div class="scroll-down">
<p>Scroll down... </p>
</div>

Scroll down...

CSS Placement

Be sure to place the CSS in the above examples in either an external style sheet, the document <head>, or scope it using the scope attribute.

Note that at the time of writing, Firefox has a bug whereby it does not support the @keyframes rule in an inline or scoped style sheet (bug 830056).

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