Marquee Styles

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

Marquee Styles

A number of CSS style properties can be used to create a marquee effect as an alternative to the HTML <marquee> tag (deprecated). A marquee effect is especially useful in HTML apps on cell phones and other mobile devices with limited screen space to display content that does easily fit the screen width. This may be one reason the earliest support for the marquee style is in the Safari browser, where it can be used for HTML applications on iOS devices (iPhone, iPad and iPod Touch).

Check out the examples of marquees in Safari on your iPhone, iPad or iPod Touch.

Marquee Style Properties

Property*	Values and Description
overflow: auto	auto (default, required)
overflow-style: marquee	marquee (required) indicates the content is to be animated with a marquee effect
white-space: nowrap	nowrap (required) `white-space: nowrap` is required, especially with `marquee-style: alternate` to restrict the marquee content to a single line, otherwise it would just wrap onto as many lines as needed
marquee-direction: forward marquee-direction: reverse	The initial direction that the marquee is moved. With marquee-loop > 1 and `marquee-style: alternate`, the marquee will be moved in the opposite direction when animation in the specified direction has completed. forward (default) at any fixed location, the marquee appears in the order that someone would normally read it reverse the marquee appears in reverse of normal reading order
marquee-loop	a positive integer (default `1`), zero (`0`) or the keyword `infinite`.
marquee-style: scroll marquee-style: slide marquee-style: alternate	scroll (default) the marquee will scroll on, go all the way across and scroll off again slide depending on marquee-loop, the marquee will scroll in and either stop or disappear just before starting the next loop iteration alternate the marquee will initially be visible and just scroll back and forth
marquee-speed: slow marquee-speed: normal marquee-speed: fast	slow normal (default) fast
-overflow-x: -webkit-marquee	equivalent to overflow-style: marquee -webkit-marquee indicates the content is to be animated with a marquee effect
-webkit-marquee	shorthand notation for marquee properties in the form: `direction` `increment` `repetition` `style` `speed`
-webkit-marquee-direction: auto -webkit-marquee-direction: forwards -webkit-marquee-direction: backwards -webkit-marquee-direction: right -webkit-marquee-direction: left -webkit-marquee-direction: up -webkit-marquee-direction: down -webkit-marquee-direction: ahead -webkit-marquee-direction: reverse	equivalent to marquee-direction The initial direction that the marquee is moved. With -webkit-marquee-repetition-property > 1 and `-webkit-marquee-style-property: alternate`, the marquee will be moved in the opposite direction when animation in the specified direction has completed. auto (default) the marquee moves in the default direction forwards the marquee moves from left to right, which is equivalent to marquee-direction: reverse backwards the marquee moves from right to left, which is equivalent to marquee-direction: forward right the marquee moves from left to right left the marquee moves from right to left up the marquee moves from bottom to top down the marquee moves from top to bottom ahead the marquee moves from bottom to top reverse the marquee moves from top to bottom
-webkit-marquee-increment	The increment can be specified as a positive or zero length or one of the keywords: small medium large
-webkit-marquee-repetition	equivalent to marquee-loop a positive or zero count for the number of times that animation of the marquee will be repeated
-webkit-marquee-style: none -webkit-marquee-style: scroll -webkit-marquee-style: slide -webkit-marquee-style: alternate	equivalent to marquee-style none the marquee will not move unless style is changed scroll the marquee will scroll on, go all the way across and scroll off again slide depending on marquee-loop, the marquee will scroll in and either stop or disappear just before starting the next loop iteration alternate the marquee will initially be visible and just scroll back and forth
-webkit-marquee-speed	equivalent to marquee-speed distance over a period of time in the format `distance/time` or a keyword: slow normal fast
* includes possible values for enumerated properties

Marquee Examples

The first browsers that these examples work in are the WebKit browsers, except for the shorter example with marquee-style: alternate, which works in Safari but not Chrome.

This uses marquee-style: scroll, so it scrolls off the screen then scrolls back on.

This uses marquee-style: slide, so it slides on, disappears and then slides on again.

This uses marquee-style: alternate, so it bounces back and forth.

If the marquee content is longer than the screen width and marquee-style: alternate is used then the text will move back and forth in order to show all of it.

In the last example, some left and right padding is added with the padding: 0 1em style property in order to give the user a little time to read the first and last word at each end.

Valid HTML 5