This page contains CSS marquee code that you can copy and paste to create your own marquees.
Here, we use CSS animations to create a CSS marquee that will work just like an HTML marquee. Vendor prefixes have been added, as well as a little bug-fix, in order to get it to work in multiple browsers.
To make the marquees fully W3C compliant, remove the vendor prefixes and their respective code (i.e. the bits that have -webkit- and -moz- in them).
Here, we use CSS animations to create scrolling text.
To make a scrolling image, simply replace the text with an image. Also, here we replace the <p> element with a <div> element, and place the <img> tag inside that.
Here, we use CSS animations to create bouncing text. We do this by adding alternate to the animation code. We also adjust the value passed in to translateX() so that the text doesn’t disappear from view as it bounces from side to side.
HTML Marquees vs CSS Marquees
Marquees are often done using the HTML marquee tag. The good thing about this tag is that most browsers support it. It is also extremely easy to use—it works just like any other HTML tag, and you can customize your marquee using attributes such as direction, behavior, and more.
The main problem with using the marquee tag is that it’s non-standard HTML. The marquee tag is not actually part of the official HTML specifications. Marquee functionality is more suited towards CSS than they are to HTML.
Therefore, HTML marquees should be avoided and CSS marquees should be used instead.
Another benefit of CSS marquees is that they can incorportate more advanced features than the HTML version will allow. CSS can be used to create all sorts of weird and wacky styles, and there’s no reason you couldn’t incorporate some of these into your marquees.
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: