You may make your website more engaging for visitors by learning how to implement scrolling text using CSS. What’s even better? CSS text scrolling is easier to learn than it looks at first glance. You may utilize your newfound scrolling text skills to design a news ticker, a movie’s closing credits, or even transport your audience to a galaxy far, far away.
If you want to attract new users to your website, it’s essential to keep it straightforward and content-focused most of the time. This tutorial will show you how to make a scrolling text animation using the CSS and HTML formats. We’ve also included four code snippets you may use as a starting point for your own scrolling text.
Updated October 2026. We added the four CSS code snippets the tutorial refers to, noted that vendor prefixes are no longer needed for CSS animations, added a reduced-motion tip, and removed unlinked example websites we could not verify.
Scrolling Text in CSS
We’ll use the transform: translateX and transform: translateY properties together with CSS animations (the @keyframes rule) to make the text move. Older tutorials added vendor prefixes such as -webkit- and -moz- to animation rules, but according to MDN, @keyframes has worked across all major browsers without prefixes since September 2015. Are you prepared to begin making your own CSS scrolling text animation? We’ll begin with text that scrolls from right to left.
Also Read – Sales Velocity: What It Is & How to Measure It
CSS Horizontal Scrolling Text: Right-to-Left
Putting text within a div labeled scroll-text will cause it to scroll from right to left. The scroll-container div will be used to move this element inside of it.
<div class="scroll-container">
<div class="scroll-text">This text scrolls from right to left.</div>
</div>
.scroll-container {
overflow: hidden;
}
.scroll-text {
transform: translateX(100%);
animation: scroll-right-to-left 10s linear infinite;
}
@keyframes scroll-right-to-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}Modifying the CSS will allow you to get the scrolling effect you want for the text. Changing the seconds value of the animation property from the default of 10s will cause the scrolling speed to adapt accordingly. The scrolling effect may be sped up by setting this number lower, and slowed down by setting it higher.
The width of the div also has an effect on how quickly the text scrolls: the more space there is, the faster the scrolling will be. When the browser window is adjusted, the text rate adapts accordingly. The issue may be fixed by specifying a fixed width in pixels for the scroll container.
CSS Horizontal Scrolling Text: Left-to-Right
Swap the positive and negative translateX values to have the text scroll from left to right. Every occurrence of 100% will be changed to -100%, and every occurrence of -100% will be changed to 100%. The text inside scroll-text has likewise been aligned to the right by me. The animation will begin with the text already in place.
.scroll-text {
text-align: right;
transform: translateX(-100%);
animation: scroll-left-to-right 10s linear infinite;
}
@keyframes scroll-left-to-right {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}CSS Vertical Scrolling Text: Bottom-to-Top
Substitute translateY for translateX whenever you see it to make the text scroll vertically. In addition, I have centered the text, shortened the animation time to 5 seconds, and set a height for the div container. The effect is a more pronounced vertical scroll.
.scroll-container {
height: 200px;
overflow: hidden;
}
.scroll-text {
text-align: center;
transform: translateY(100%);
animation: scroll-bottom-to-top 5s linear infinite;
}
@keyframes scroll-bottom-to-top {
from { transform: translateY(100%); }
to { transform: translateY(-100%); }
}CSS Vertical Scrolling Text: Top-to-Bottom
To switch the direction of the vertical scroll, we simply swap the signs of the translateY values, just as we did when changing the direction of the horizontal scroll.
@keyframes scroll-top-to-bottom {
from { transform: translateY(-100%); }
to { transform: translateY(100%); }
}Respect Reduced Motion Settings
Some visitors set their device to reduce motion. MDN recommends using the prefers-reduced-motion media query to stop animations for these users, which improves accessibility:
@media (prefers-reduced-motion: reduce) {
.scroll-text {
animation: none;
transform: none;
}
}Also Read – What Is Annual Contract Value (ACV) And How Should You Use It?
Scrolling Text in JavaScript
Now that you know the fundamentals of making scrolling text, we can move on to the more advanced techniques. JavaScript may be needed to create a marquee effect for the more dynamic scrolling text components. A few instances of this type of use of JavaScript are provided.
For example, a script (with or without a library such as jQuery) can turn a list of items into a rotating news ticker, so that you can add more items to the list without changing the code. Another common technique is to link horizontal text movement to the visitor’s own page scrolling, so the text slides sideways as the user scrolls down.
Tips for Using Scrolling Text
Scrolling text works best for short messages such as announcements, logos of partners or a playful 404 page. Keep the movement slow enough to read, place it where it does not distract from your main content, and remember that while the aesthetics of scrolling text are worth thinking about, the needs of the user should always come first.
Also Read – What Is Bandwagon Advertising? Example, Advantage And More
Marquee Element with HTML5 Scrolling Text
The HTML <marquee> element can create a scrolling text area without any additional scripting or style sheets, and attributes such as behavior, direction and scrollamount control how it moves.
However, MDN lists the marquee element as deprecated and advises against using it in new projects, because it may be removed from web standards or browsers. Instead, use the CSS animation and transform approach described above, together with the prefers-reduced-motion media query.
