CSS Marquees

CSS marquees are replacing HTML marquees as the standard method for creating scrolling, bouncing, or slide-in text and images.

CSS marquees can be created with CSS animations, which make them standards-compliant. The old HTML method of using the <marquee> element is not standards-compliant, as the element is not part of the W3C HTML specifications.

To create a CSS marquee, we can use the animation property along with the @keyframes rule to create the animation.

The examples on this page use translateX() and translateY() to specify the path of the scrolling elements. You can also create a css marquee using margins.

Scrolling Text

Here we use translateX() to determine the placement of the text at the start and finish of the animation. It then moves between these two points as the animation progresses.

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 font-size: 3em;
 color: limegreen;
 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: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<!-- HTML -->	
<div class="example1">
<h3>Scrolling text... </h3>
</div>

Slide-In Text

You can create slide-in text by removing infinite and setting the end translateX() values to zero or a positive value. Here, we also make the text slow down gradually before it stops. We do this changing linear to ease-out. You may need to refresh this page to see the slide-in effect (or see Fly-In Text).

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example4 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example4 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: left;

 /* Apply animation to this element */	
 -moz-animation: example4 10s ease-out;
 -webkit-animation: example4 10s ease-out;
 animation: example4 10s ease-out;
}
/* Move it (define the animation) */
@-moz-keyframes example4 {
 0%   { -moz-transform: translateX(200%); }
 100% { -moz-transform: translateX(0%); }
}
@-webkit-keyframes example4 {
 0%   { -webkit-transform: translateX(200%); }
 100% { -webkit-transform: translateX(0%); }
}
@keyframes example4 {
 0%   { 
 -moz-transform: translateX(200%); /* Firefox bug fix */
 -webkit-transform: translateX(200%); /* Firefox bug fix */
 transform: translateX(200%); 		
 }
 100% { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 
 }
}
</style>

<!-- HTML -->
<div class="example4">
<h3>Slide-in text.</h3>
</div>

Left to Right

To make the marquee scroll in the opposite direction, change the translateX() values. For example, to scroll from left to right, swap 100% with -100% and vice-versa.

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example2 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example2 h3 {
 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: example2 15s linear infinite;
 -webkit-animation: example2 15s linear infinite;
 animation: example2 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example2 {
 0%   { -moz-transform: translateX(-100%); }
 100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes example2 {
 0%   { -webkit-transform: translateX(-100%); }
 100% { -webkit-transform: translateX(100%); }
}
@keyframes example2 {
 0%   { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 		
 }
 100% { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 
 }
}
</style>

<!-- HTML -->
<div class="example2">
<h3>Left to right... </h3>
</div>

Scroll Vertically

To scroll vertically, you can use translateY() instead of translateX().

Here, I've increased the height of the outer box in order to free up some room for the element to scroll.

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example3 {
 height: 200px;	
 overflow: hidden;
 position: relative;
}
.example3 h3 {
 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: example3 15s linear infinite;
 -webkit-animation: example3 15s linear infinite;
 animation: example3 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example3 {
 0%   { -moz-transform: translateY(-100%); }
 100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes example3 {
 0%   { -webkit-transform: translateY(-100%); }
 100% { -webkit-transform: translateY(100%); }
}
@keyframes example3 {
 0%   { 
 -moz-transform: translateY(-100%); /* Firefox bug fix */
 -webkit-transform: translateY(-100%); /* Firefox bug fix */
 transform: translateY(-100%); 		
 }
 100% { 
 -moz-transform: translateY(100%); /* Firefox bug fix */
 -webkit-transform: translateY(100%); /* Firefox bug fix */
 transform: translateY(100%); 
 }
}
</style>

<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>

Bouncing Text

To create bouncing text, add alternate to the end of the animation property. Also, modify the translateX() values so that the text doesn't bounce out of sight (unless that's your intention).

I have changed text-align:center; to text-align:left; so that the text can come right across to the left. Note that I've removed the code for the starting position too, although this is optional.

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example5 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example5 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: left;
 /* Apply animation to this element */	
 -moz-animation: example5 5s linear infinite alternate;
 -webkit-animation: example5 5s linear infinite alternate;
 animation: example5 5s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes example5 {
 0%   { -moz-transform: translateX(70%); }
 100% { -moz-transform: translateX(0%); }
}
@-webkit-keyframes example5 {
 0%   { -webkit-transform: translateX(70%); }
 100% { -webkit-transform: translateX(0%); }
}
@keyframes example5 {
 0%   { 
 -moz-transform: translateX(70%); /* Firefox bug fix */
 -webkit-transform: translateX(70%); /* Firefox bug fix */
 transform: translateX(70%); 		
 }
 100% { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 
 }
}
</style>

<!-- HTML -->
<div class="example5">
<h3>Bouncing text... </h3>
</div>

Alternative Scroll Properties

In the above examples we move the text by changing the values of the translateX() and translateY() functions.

We could just as easily use other CSS properties to make the elements scroll. For example, we could use margins. We could also use properties such as left and top to move the elements vertically or horizontally. Another option for horizontal movement is text-indent.

Browser Compatibility

This page uses browser prefixes for maximum browser compatibility. For full standards-compliant code, remove the declarations with browser prefixes (although be aware that doing so may reduce browser compatibility). The browser prefixes are the declarations that include -webkit- and -moz-.

Web.QHMIT.com