CSS Marquee

This page contains CSS marquee code that you can copy and paste to create your own marquees.

Here, we use CSS animations to create a CSS marquee that will work just like an HTML marquee. Vendor prefixes have been added, as well as a little bug-fix, in order to get it to work in multiple browsers.

To make the marquees fully W3C compliant, remove the vendor prefixes and their respective code (i.e. the bits that have -webkit- and -moz- in them).

Scrolling Text

Here, we use CSS animations to create scrolling text.

Source Code	Result
<style> .marquee { height: 50px; overflow: hidden; position: relative; background: yellow; color: orange; border: 1px solid orange; } .marquee 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 5s linear infinite; -webkit-animation: scroll-left 5s linear infinite; animation: scroll-left 5s 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="marquee"> <p>Scrolling text... </p> </div>	Scrolling text...

Source Code

Result

<style>
.marquee {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.marquee 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 5s linear infinite;
 -webkit-animation: scroll-left 5s linear infinite;
 animation: scroll-left 5s 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="marquee">
<p>Scrolling text... </p>
</div>

Scrolling text...

Scrolling Image

To make a scrolling image, simply replace the text with an image. Also, here we replace the <p> element with a <div> element, and place the <img> tag inside that.

Source Code	Result
<style> .marquee-outer { height: 100px; overflow: hidden; position: relative; color: orange; } .marquee-inner { 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 5s linear infinite; -webkit-animation: scroll-left 5s linear infinite; animation: scroll-left 5s 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="marquee-outer"> <div class="marquee-inner"><img src="/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish"></div> </div>

Source Code

Result

<style>
.marquee-outer {
 height: 100px;	
 overflow: hidden;
 position: relative;
 color: orange;
}
.marquee-inner {
 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 5s linear infinite;
 -webkit-animation: scroll-left 5s linear infinite;
 animation: scroll-left 5s 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="marquee-outer">
<div class="marquee-inner"><img src="/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish"></div>
</div>

Bouncing Text

Here, we use CSS animations to create bouncing text. We do this by adding alternate to the animation code. We also adjust the value passed in to translateX() so that the text doesn't disappear from view as it bounces from side to side.

Source Code	Result
<style> .bounce { height: 50px; overflow: hidden; position: relative; background: yellow; color: orange; border: 1px solid orange; } .bounce 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: bouncing-text 5s linear infinite alternate; -webkit-animation: bouncing-text 5s linear infinite alternate; animation: bouncing-text 5s linear infinite alternate; } / Move it (define the animation) / @-moz-keyframes bouncing-text { 0% { -moz-transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); } } @-webkit-keyframes bouncing-text { 0% { -webkit-transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); } } @keyframes bouncing-text { 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="bounce"> <p>Bouncing text... </p> </div>	Bouncing text...

Source Code

Result

<style>
.bounce {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.bounce 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: bouncing-text 5s linear infinite alternate;
 -webkit-animation: bouncing-text 5s linear infinite alternate;
 animation: bouncing-text 5s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes bouncing-text {
 0%   { -moz-transform: translateX(50%); }
 100% { -moz-transform: translateX(-50%); }
}
@-webkit-keyframes bouncing-text {
 0%   { -webkit-transform: translateX(50%); }
 100% { -webkit-transform: translateX(-50%); }
}
@keyframes bouncing-text {
 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="bounce">
<p>Bouncing text... </p>
</div>

Bouncing text...

HTML Marquees vs CSS Marquees

Marquees are often done using the HTML marquee tag. The good thing about this tag is that most browsers support it. It is also extremely easy to use—it works just like any other HTML tag, and you can customize your marquee using attributes such as direction, behavior, and more.

The main problem with using the marquee tag is that it's non-standard HTML. The marquee tag is not actually part of the official HTML specifications. Marquee functionality is more suited towards CSS than they are to HTML.

Therefore, HTML marquees should be avoided and CSS marquees should be used instead.

Another benefit of CSS marquees is that they can incorportate more advanced features than the HTML version will allow. CSS can be used to create all sorts of weird and wacky styles, and there's no reason you couldn't incorporate some of these into your marquees.

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