JSFiddle - React, Tailwind, and code Playground
HTML
<div class="animation">
<div id="animate-area"></div>
<div id="velo">
<img src="http://osborne.fr/media/images/velo.png">
<span class="wheel rear"></span>
<span class="wheel center"></span>
<span class="wheel front"></span>
</div>
</div>
CSS
.animation {
overflow: hidden;
width: 100%;
height: 600px;
position: relative;
}
.animation #animate-area {
width: 20000px;
height: 600px;
background-image: url('http://osborne.fr/media/images/bg.jpg');
background-position: bottom left;
background-repeat: repeat-x;
animation: animatedBackground 60s linear infinite;
-ms-animation: animatedBackground 60s linear infinite;
-moz-animation: animatedBackground 60s linear infinite;
-webkit-animation: animatedBackground 60s linear infinite;
}
.animation #velo {
}
.animation #velo img {
position: absolute;
bottom: 0;
width: 450px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2;
}
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: -100% 0; }
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: -100% 0; }
}
@-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: -100% 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: -100% 0; }
}
.animation .wheel {
height: 56px;
width: 56px;
border-radius: 100%;
border-left: 1px solid #ccc;
position: absolute;
-webkit-animation: spinner 60s infinite linear;
position: absolute;
margin: 0 auto;
bottom: 25px;
}
.animation .rear {
height: 40px;
width: 40px;
bottom: 23px;
left: 0;
right: 343px;
-webkit-animation: spinner 50s infinite linear;
}
.animation .center {
left: 75px;
right: 0;
}
.animation .front {
left: 331px;
right: 0;
border-left: none;
border-top: 1px solid #ccc;
}
@-webkit-keyframes spinner{
100%{
-webkit-transform: rotate(36000deg);
}
}