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 :

<style>
  body{
    background:#000;
    overflow-x: hidden;
  }
  .marquee{
    color:#fff;
    font-size: 3em;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;    
    transform:translateX(100%);
    animation: cssmarquee 25s linear infinite;
  }
  
  @keyframes cssmarquee {
    0%{ 
      transform: translateX(100%);       
    }

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

 

Follow this video for complete guidance :