CSS3 Marquee

« Previous Tutorial Next Tutorial »

CSS3 enables you to produce marquee effects on the content of HTML elements. The marquee effects slowly move the content of a box from one side to another side, so that all parts of the box are visible at least once.

You can also specify the speed of the movement, the direction of movement, and how far the content will be moved.

The properties that produce the marquee effects are given as follows :

Let's discuss these properties one by one in detail.

CSS3 marquee-style

The marquee-style specifies a style to move the content of an element.

The syntax to use the marquee-style property is given as follows:

marquee-style: value;

In the preceding syntax, the description of the various values is given as follows :

CSS3 marquee-loop

The marquee-loop determines how often the content moves.

For example, an element that is outside the viewport starts moving when it is scrolled into view.

The syntax to use the marquee-loop property is given as follows :

marquee-loop: <non-negative-integer> | infinite;

CSS3 marquee-direction

The marquee-direction specifies the initial direction in which the content will move.

The syntax to use the marquee-direction property is given as follows :

marquee-direction: forward | reverse;

CSS3 marquee-speed

The marquee-speed determines how fast the content scrolls.

The syntax to use the marquee-speed property is given as follows :

marquee-speed: slow | normal | fast;

CSS3 marquee shorthand

The marquee specifies the shorthand to specify the marquee-style, marquee-loop, marquee-direction, and marquee-speed properties.

« Previous Tutorial Next Tutorial »


Quick Links
Signup - Login - Give Online Test