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
-moz- in them).
Here, we use CSS animations to create scrolling text.
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
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:
Also check out the Marquee Generator.
Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)