In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > browser specific extensions > -webkit-marquee

-webkit-marquee property

Browser support:

Specifies up to five separate marquee properties, in a shorthand form.

With this property you have control over how text within the marquee element should be scrolled. You can set the direction, repetition time, distance between each step and the speed of the marquee. Furthermore, you can set how the marquee should behave at the beginning and end points of each repetition (scroll like news-scrollers, slide like presentation slideshows, or it can bounce back from the side of the marquee, like a ball does).

JavaScript page for this property: webkitMarquee. You can find other example(s) there.

Possible values:

One of the following values:

•

Values in this order (use the space character to separate them):

1.	<-webkit-marquee-direction>
2.	<-webkit-marquee-increment>
3.	<-webkit-marquee-repetition>
4.	<-webkit-marquee-speed>
5.	<-webkit-marquee-style>

•

inherit

Description of values:

-webkit-marquee-direction

Specifies the scrolling direction of the marquee.

-webkit-marquee-increment

Specifies the distance between each step of the scrolling marquee in pixels.

-webkit-marquee-repetition

Specifies the number of times the marquee should repeat.

-webkit-marquee-speed

Specifies the speed of the scrolling mechanism in a marquee element.

-webkit-marquee-style

Specifies the style of scrolling in a marquee element.

inherit

Takes the value of this property from the computed style of the parent element.

Default: auto medium infinite normal scroll.

Example HTML code 1:

This example illustrates the use of the -webkit-marquee property:

<head>
    <style>
        #myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee: up medium 2 normal scroll;
        }
    </style>
</head>
<body>
    <marquee id="myMarquee">
        first line<br />
        second line<br />
        third line
    </marquee>
</body>