JSFiddle - React, Tailwind, and code Playground

by marczking

HTML

<div id="test"></div>
<div id="test2"></div>

CSS

#test {
    float:left;
    -webkit-animation: test 5s linear infinite;
    background-image: url("http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2010/04/2-SEAMLESS.jpg");
    background-repeat: repeat-x;
    height: 300px;
    width: 1800px;
}

@-webkit-keyframes test {
    0% { -webkit-transform: translateX(-1800px); }
    100% { -webkit-transform: translateX(0); }
}
#test2 {
    float: none;
    -webkit-animation: test2 5s linear infinite;
    background-image: url("http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2010/04/2-SEAMLESS.jpg");
    background-repeat: repeat-x;
    height: 300px;
    width: 1800px;
}

@-webkit-keyframes test2 {
    0% { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(1800px); }
}