JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
    
</div>

CSS

div.bg {
    background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
    height:443px;
    width:795px;
}

@-webkit-keyframes animateBg {
    0%{ background-position :0px center}
    5.882352941176471%{ background-position :795px center}
    11.764705882352942%{ background-position :1590px center}
    17.647058823529413%{ background-position :2385px center}
    23.529411764705884%{ background-position :3180px center}
    29.411764705882355%{ background-position :3975px center}
    35.294117647058826%{ background-position :4770px center}
    41.1764705882353%{ background-position :5565px center}
    47.05882352941177%{ background-position :6360px center}
    52.94117647058824%{ background-position :7155px center}
    58.82352941176471%{ background-position :7950px center}
    64.70588235294119%{ background-position :8745px center}
    70.58823529411765%{ background-position :9540px center}
    76.47058823529412%{ background-position :10335px center}
    82.3529411764706%{ background-position :11130px center}
    88.23529411764707%{ background-position :11925px center}
    23 94.11764705882354%{ background-position :12720px center}
}

div.bg:hover {
      animation-name: animateBg;  
      animation-duration: 4s;
}