Slide-In Text

You can create slide-in text using one of the following methods:

HTML Slide-In Text — using the HTML <marquee> tag
CSS Slide-In Text — using CSS animations (recommended)

CSS animations is the recommended method, as they are becoming part of the official CSS specifications (whereas, the <marquee> tag is not actually part of the official HTML specification).

Note: Due to the nature of slide-in text, you may need to refresh this page several times to catch all of the examples. This is because, once the text has slid in, it stops. If you don't see it slide in, you've missed it... unless you reload the page!

HTML Slide-In Text

Here's an example of using the <marquee> tag to create slide-in text.

See HTML slide-in Text for more examples.

Source Code	Result
<marquee behavior="slide" direction="left">HTML slide-in text...</marquee>	HTML slide-in text...

CSS Slide-In Text

Here is how to achieve the same effect using CSS animations.

See CSS slide-in Text for more examples.

Source Code	Result
<style> div.slide-left { width:100%; overflow:hidden; } div.slide-left p { animation: slide-left 10s; } @keyframes slide-left { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } </style> <div class="slide-left"> <p>CSS slide-in text...</p> </div>	CSS slide-in text...

HTML vs CSS

The <marquee> tag has been supported by the major browsers for a long time now. Despite this, it has never made it into an official HTML specification. Therefore if you use the <marquee> tag, you won't be able to validate your document as valid HTML.

Furthermore, HTML is not the right place for specifying marquees and animations. HTML (especially from HTML5) is more concerned with the semantics of the elements on the page. Marquees and animations are more suited to CSS. Therefore, CSS is the recommended technology to use when creating slide-in text or other marquee-type effects.

See CSS marquees for more about using CSS to create marquee effects.

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:

Marquee Generator

Also check out the Marquee Generator.

Marquee Usability

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 :)