JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head></head>
<body id="body"><body>
</html>

CSS

html{
height: 100%;
min-height: 100%;
}
body{
background:url('http://www.netcribe.com/images/pattern.png') repeat fixed left center #0296BA;
overflow:hidden;
}
.icons{
background-image:url('http://www.netcribe.com/images/leadicons.png');
background-repeat:repeat-x;
height:60px;
width:4898px;
clear:both;
/*animation-duration*/
-webkit-animation-duration:200s;
   -moz-animation-duration:200s;
    -ms-animation-duration:200s;
     -o-animation-duration:200s;
        animation-duration:200s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;       
}

.move-left{
/*animation-name*/
-webkit-animation-name:movement-left;
   -moz-animation-name:movement-left;
    -ms-animation-name:movement-left;
     -o-animation-name:movement-left;
        animation-name:movement-left; 
}

.move-right{
/*animation-name*/
-webkit-animation-name:movement-right;
   -moz-animation-name:movement-right;
    -ms-animation-name:movement-right;
     -o-animation-name:movement-right;
        animation-name:movement-right; 
}

JavaScript

$(document).ready(function(){
    var clientWidth, clientHeight, x, y, z;
    clientWidth = $("html").width();
    clientHeight = $("html").height();
    margin = 4898 - parseInt(clientWidth);
    x=Math.ceil(clientHeight/60); // Целое число элементов с классом .icons требуемых для заполнения страницы по высоте
    y=0; // Разные значения свойства background-position
    z=Math.ceil(4898/(2*x)); // Оптимальная разцица значений background-position
    $("#body").css({'width':clientWidth,'height':clientHeight});
  
  $("#body").append('<style>@keyframes movement-left {from {} 50% {margin-left:'+ -margin +'px;} to {margin-left: 0px;}} @keyframes movement-right {from {} 50% {margin-left: 0px;} to {margin-left:'+-margin+'px;}} @-moz-keyframes movement-left {from {} 50% {margin-left:'+-margin+'px;} to {margin-left: 0px;}} @-moz-keyframes movement-right {from {} 50% {margin-left: 0px;} to {margin-left:'+-margin+'px;}} @-ms-keyframes movement-left {from {} 50% {margin-left:'+-margin+'px;} to {margin-left: 0px;}} @-ms-keyframes movement-right {from {} 50% {margin-left: 0px;} to {margin-left:'+-margin+'px;}} @-o-keyframes movement-left {from {} 50% {margin-left:'+-margin+'px;} to {margin-left: 0px;}} @-o-keyframes movement-right {from {} 50% {margin-left: 0px;} to {margin-left:'+-margin+'px;}} @-webkit-keyframes movement-left {from {} 50% {margin-left:'+-margin+'px;} to {margin-left: 0px;}} @-webkit-keyframes movement-right {from {} 50% {margin-left: 0px;} to {margin-left:'+-margin+'px;}} </style>');
    
for(var i=0;i<x;i++){
    if(i%2==0){
        $("#body").append('<div style="background-position:'+y+'px 0;" class="icons move-left">');
    } else{
        $("#body").append('<div style="background-position:'+y+'px 0; margin-left: '+ -margin +'px" class="icons move-right">');}y+=z;}
});