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.
Right to Left
Here our text starts with a margin of 100% (
margin-left:100%) and ends with a margin of negative 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% and vice-versa.
Here, I've increased the height of the outer box in order to free up some room for the element to scroll.
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.
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
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.
The examples on this page use W3C code—no vendor extensions have been used (such as
-moz-). For maximum browser compatibility, you may need to add browser extenstions. However, don't add these if you need W3C-compliant code.