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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content