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
translateY() to specify the path of the scrolling elements. You can also create a css marquee using margins.
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.
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
ease-out. You may need to refresh this page to see the slide-in effect (or see Fly-In Text).
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% and vice-versa.
To scroll vertically, you can use
translateY() instead of
Here, I've increased the height of the outer box in order to free up some room for the element to scroll.
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: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.
Alternative Scroll Properties
In the above examples we move the text by changing the values of the
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
top to move the elements vertically or horizontally. Another option for horizontal movement is
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