JSFiddle - React, Tailwind, and code Playground

by marczking

HTML

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

CSS

#test {
    -moz-animation: test 5s linear infinite;
    -webkit-animation: test 5s linear infinite;
    -o-animation: test 5s linear infinite;
    -ms-animation: test 5s linear infinite;
    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: calc(100% + 600px);
}

@-moz-keyframes test {
    0% { -moz-transform: translateX(-600px); }
    100% { -moz-transform: translateX(0px); }
}

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

@-o-keyframes test {
    0% { -o-transform: translateX(-600px); }
    100% { -o-transform: translateX(0px); }
}

@-ms-keyframes test {
    0% { -ms-transform: translateX(-600px); }
    100% { -ms-transform: translateX(0px); }
}

@keyframes test {
    0% { transform: translateX(-600px); }
    100% { transform: translateX(0px); }
}

JavaScript

window.onresize = function() {
    el = document.getElementById("test");
    el.style.display='none';
    el.offsetHeight; // no need to store this anywhere, the reference is enough
    el.style.display='block';
}