Create Marquee in webpage using CSS

Marquee is an animation effect for web pages used to create horizontal or vertical scrolling text and images. The <marquee> element of HTML is not a standard-compliant, ie the element is not part of the W3 HTML specifications.

For creating a marquee using CSS, we have to use the CSS animation property together with the @keyframes rule.

Source Code :

    overflow-x: hidden;
    font-size: 3em;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;    
    animation: cssmarquee 25s linear infinite;
  @keyframes cssmarquee {
      transform: translateX(100%);       

      transform: translateX(-100%); 
<h1 class="marquee">
  CSS Marquee Goes Here ..... Text Scrolling 


Follow this video for complete guidance :

Recommended For You

About the Author: Ritesh Ghimire

Ritesh is a Computer Engineer, Web Developer and an active cricket follower.