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