JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<html>
  <body>
    <div id="main-banner">
       <div class="bg-animation">
         <center>
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           This is the text
           <br /><br /><br />
           
         </center>
         
         
         
       </div>
    </div>
  </body>
</html>

CSS

#main-banner .bg-animation{
    background: url('http://pentathemes.com/saasapp/images/intro-bg.gif') 0 0 repeat;
    -webkit-animation: animate_background 10s linear 0s infinite;
    -moz-animation: animate_background 10s linear 0s infinite;
    -o-animation: animate_background 10s linear 0s infinite;
    animation: animate_background 10s linear 0s infinite;
    height:100vh;
}
@-webkit-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -200px;
    } 
}
@-moz-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -200px;
    } 
}
@-o-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -200px;
    } 
}
@keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -200px;
    } 
}