CSS Marquees

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 translateX() and translateY() to specify the path of the scrolling elements. You can also create a css marquee using margins.

Scrolling Text

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.

Slide-In Text

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 linear to 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% with -100% and vice-versa.

Scroll Vertically

To scroll vertically, you can use translateY() instead of translateX().

Here, I've increased the height of the outer box in order to free up some room for the element to scroll.

Bouncing Text

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:center; to 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 translateX() and translateY() functions.

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 left and top to move the elements vertically or horizontally. Another option for horizontal movement is text-indent.

Browser Compatibility

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 -webkit- and -moz-.