Creating Marquee Text with CSS

Marquee text (scrolling or moving text) can be created using CSS animations. Here’s how to do it with explanations:

Basic Marquee Effect

Let’s add some text content for marquee.

<div class="marquee-basic">
<p>This text will scroll from right to left like old marquee tags!</p>
</div>

<p>This text will scroll from right to left like old marquee tags!</p>

</div>

Now, add some CSS as given below.

.marquee-basic {
width: 100%;
overflow: hidden; /* Hide overflow content */
white-space: nowrap; /* Keep text in a single line */
box-sizing: border-box;
}
.marquee-basic p {
display: inline-block;
padding-left: 100%; /* Start off-screen to the right */
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0); /* Start at initial position */
}
100% {
transform: translateX(-100%); /* Move left by 100% of element width */
}
}

.marquee-basic {

width: 100%;

overflow: hidden; /* Hide overflow content */

white-space: nowrap; /* Keep text in a single line */

box-sizing: border-box;

}

.marquee-basic p {

display: inline-block;

padding-left: 100%; /* Start off-screen to the right */

animation: marquee 15s linear infinite;

}

@keyframes marquee {

0% {

transform: translateX(0); /* Start at initial position */

}

100% {

transform: translateX(-100%); /* Move left by 100% of element width */

}

The above CSS creates a marquee effect to the text content given above.

Explanation:

Container Setup:
- overflow: hidden ensures content outside the container isn’t visible
- white-space: nowrap prevents text from wrapping to multiple lines
Text Element:
- display: inline-block allows the element to be animated properly
- padding-left: 100% starts the text completely off-screen to the right
Animation:
- @keyframes marquee defines the animation sequence
- transform: translateX(-100%) moves the element left by its full width
- The animation runs for 15 seconds, linearly, and infinitely

Advanced Marquee with Pause on Hover

If you want to add some advanced effect to marquee like pause on hover, you can add more CSS as given below.

.marquee-advanced p {
/* previous properties */
animation: marquee 10s linear infinite;
}
.marquee-advanced p:hover {
animation-play-state: paused; /* Pauses animation on hover */
}

.marquee-advanced p {

/* previous properties */

animation: marquee 10s linear infinite;

}

.marquee-advanced p:hover {

animation-play-state: paused; /* Pauses animation on hover */

}

Continuous Marquee (No Gap)

For a seamless loop where the text reappears immediately after disappearing:

<div class="marquee-continuous">
<p>This text will scroll continuously without gaps!</p>
<p aria-hidden="true">This text will scroll continuously without gaps!</p>
</div>

<p>This text will scroll continuously without gaps!</p>

<p aria-hidden="true">This text will scroll continuously without gaps!</p>

</div>

.marquee-continuous {
display: flex;
}
.marquee-continuous p {
flex-shrink: 0;
animation: marquee-continuous 8s linear infinite;
}
@keyframes marquee-continuous {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

.marquee-continuous {

display: flex;

}

.marquee-continuous p {

flex-shrink: 0;

animation: marquee-continuous 8s linear infinite;

}

@keyframes marquee-continuous {

0% {

transform: translateX(0);

}

100% {

transform: translateX(-100%);

}

Notes:

The original <marquee> HTML tag is obsolete and shouldn’t be used
CSS animations are more performant than JavaScript solutions for simple marquees
Consider accessibility – moving text can be problematic for some users
Adjust animation duration based on text length for optimal reading speed

Browser Support:

CSS animations are supported in all modern browsers. For very old browsers, you might need vendor prefixes (-webkit-, -moz-, -o-).

CSS Tutorial