Marquee Effect using CSS

In this article, we will understand the marquee effect with the help of CSS.

What do you mean by Marquee?

Marquee is used to create horizontal or vertical scrolling effect, animation effect in text and images for web pages. For Example: News headlines moves in TV. The <marquee> element of HTML is not widely used or a standard-compliant. So for creating a Marquee effect, you have to use the CSS animation property together with the @keyframes rule.

Following are the examples of Marquee Effect using CSS.

Example 1:

Output:

Following is the output of this example.

Example 2:

Explanation:

In the above example, we created an example of marquee effect using CSS. In this we move the images from left to right.

Output:

Following is the output of this example.

Example 3:

Explanation:

In the above example, we created an example of marquee effect using CSS. In this menus moves in horizontal direction.

Output:

Following is the output of this example.