Marquee is an effect which is used to scroll some content of an HTML element horizontally or vertically. The content can be anything like some text or an image.
The marquee-play-count property is used to specify the number of times a marquee (moving content) displays scrolling behaviour.
CSS
marquee-play-count: value;
While using marquee, sometimes the moving content of an element cannot be fit inside the element. In that case, the overflow property is used to hide the overflowing content. Also, the overflow-style property can be used to specify that the content will be displayed as a marquee by taking one of the two values - marquee-line (creates horizontal marquees) and marquee-block(creates vertical marquees).
This property is not fully supported by W3C.
Values
<integer> : This specifies the number of times the content should scroll before stopping. Negative values are not allowed.
infinite : This makes the content scroll indefinitely.
initial : Sets the default value.
inherit : Inherits the value of the parent element.
To get support from Webkit-based browsers, an alternative -webkit-marquee-repetition is used which can take one of the values stated above .
Example
The paragraph in the following example is given marquee-play-count: 4 which will make the 4 iterations of the movement of text.
HTML
<p id="marquee">This text will scroll 4 times.</p>
CSS
/* for Chrome and Safari */
#marquee {
overflow-x: -webkit-marquee;
-webkit-marquee-style: scroll;
-webkit-marquee-repetition: 4;
}
#marquee {
overflow-x: marquee-line;
marquee-style: scroll;
marquee-play-count: 4;
}
In the above code, writing overflow-x: marquee-line is equivalent to writing overflow-style: marquee.
Browser Support
The marquee module is excluded by the W3C from the CSS3 specification. Since this property is not fully supported by W3C, therefore it is recommended not to use this property.
