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
-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:
Left to Right
To scroll from left to right, we simply switch the values of
translateX() around so that
-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:
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
To make the text scroll up, we replace
translateY() and adjust the values to suit. I've also changed the scroll speed to
5s in order to speed up the marquee:
To make the text scroll down we use
translateY() as with scrolling up, but we switch the values around (i.e.
100% and vice versa):
Be sure to place the CSS in the above examples in either an external style sheet, the document
<head>, or scope it using the
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:
Also check out the Marquee Generator.
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 :)