JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<div class="sfondo">
 <div class="macchina">
     <div class="ruota1"></div>
     <div class="ruota2"></div>     
 </div>
</div>

CSS

@-webkit-keyframes sfondo {
    0% { background-position: right bottom; }
    100% { background-position: left bottom; }
}

@-webkit-keyframes ruota {
     0%{-webkit-transform:rotate(360deg) translate(0px,0px);}
     100%{-webkit-transform:rotate(0deg) translate(0px,0px);}
}

.sfondo {
    background: transparent url(http://dvdimagehosting.altervista.org/images/sfondo.png) no-repeat;
    height: 509px;
    width: 609px;
    -webkit-animation-name: sfondo;
    -webkit-animation-duration: 300s;
    -webkit-animation-iteration-count: infinite;
}
    
.macchina {
    background: transparent url(http://dvdimagehosting.altervista.org/images/macchina.png) no-repeat;
    height: 233px;
    width: 545px;
    border: none;
    position: relative;
    top: 250px;
    left: 50px;
}

.ruota1 {
    background: transparent url(http://dvdimagehosting.altervista.org/images/ruota.png) no-repeat;
    width: 94px;
    height: 91px;
    border: none;
    position: relative;
    top: 125px;
    left: 56px;
    -webkit-animation-name: ruota;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 45px 46px;
} 

.ruota2 {
    background: transparent url(http://dvdimagehosting.altervista.org/images/ruota.png) no-repeat;
    width: 94px;
    height: 91px;
    border: none;
    position: relative;
    -webkit-animation-name: ruota;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 45px 46px;
    float: left;
    top: 32px;
    left: 413px;
}