Create CSS Marquees using Margins

Here we create CSS marquees by adjusting the margin of the marquee element. For example, to make text scroll left, we create an animation that adjusts the margin-left property as it runs from start to finish.

In all cases we use the CSS animation property along with the @keyframes rule to create the animation. Then it's just a matter of deciding which direction we want the marquee to scroll.

Right to Left

Here our text starts with a margin of 100% (margin-left:100%) and ends with a margin of negative 100% (margin-left:-100%).

Left to Right

To make it scroll in the opposite direction, change the margin-left values. For example, to scroll from left to right, swap 100% with -100% and vice-versa.

Scroll Vertically

To scroll vertically, you can replace margin-left with margin-top.

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

Slide-In Text

You can create slide-in text by removing infinite and setting the to value to zero or a positive value. You may need to refresh this page to see the slide-in effect.

Bouncing Text

To create bouncing text, add alternate to the end of the animation property. Also, modify the margin-left values so that the text doesn't bounce out of sight (unless that's your intention).

Alternative Scroll Properties

In the above examples we move the text by changing the values of the margins (i.e. margin-left for horizontal movement and margin-top for vertical).

We could just as easily use other CSS properties to make the elements scroll. For example, we could have used text-indent to move the text horizontally. We could also have used the translateX() transform function to move the text horizontally and the translateY() function to move it vertically. See CSS Marquees for examples of this.

Browser Compatibility

The examples on this page use W3C code—no vendor extensions have been used (such as -webkit- and -moz-). For maximum browser compatibility, you may need to add browser extenstions. However, don't add these if you need W3C-compliant code.