JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="content"></div>
</div>

CSS

.wrapper {
     width:960px;
     height:140px;
    margin-top:80px;
    position:relative;
 }
 
 .content:before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-transform-origin: 50% 50% 0;
        -ms-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    v
    -webkit-animation-name: sideupscroll;
            animation-name: sideupscroll;
    /*animation-duration*/
    -webkit-animation-duration: 80s;
            animation-duration: 80s;
    /*animation-timing-function*/
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    background: url("http://i.imgur.com/wNna7D3.png") repeat fixed 0 0 indigo;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

/* Safari and Chrome */
@-webkit-keyframes sideupscroll {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: -50% -100%;
    }
    100% {
        background-position: -100% -200%;
    }
}


@keyframes sideupscroll {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: -50% -100%;
    }
    100% {
        background-position: -100% -200%;
    }
}