.car{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  width:700px;
  height:308px;
  overflow:hidden;
}
.carbody{
  animation: carmove 3.1s infinite linear;
  background: url(../images/car.png) 0 0;
  background-size: cover;
  height: 282px;
  position: relative; 
  width:700px;
  z-index: 125;
  margin-top: 9px;
}
.weel{
  animation: wheel 0.7s infinite linear;
  
  position: absolute;
 /* top: 67%;*/
  
  z-index: 200;
}
.weel1{left:9px; top:50%;background: url(../images/wheel-back.png) 0 0;height:109px;width:82px;}
.weel2{left: 405px; top:55%;background: url(../images/wheel.png) 0 0;height:139px;width:134px;}

/*animations*/
@keyframes carmove{
  0%{transform: translateY(0px);}
  25%{transform: translateY(1px)}
  29%{transform: translateY(2px)}
  33%{transform: translateY(3px)}
  47%{transform: translateY(0px)}
  58%{transform: translateY(1px)}
  62%{transform: translateY(2px)}
  66%{transform: translateY(3px)}
  75%{transform: translateY(1px)}
  100%{transform: translateY(0px)}
}
@keyframes wheel{
 0%{transform: rotate(0deg)}
 100%{transform: rotate(3deg)}
}



/*body {
  -webkit-animation: color-fade 10s infinite;
  -moz-animation: color-fade 10s infinite;
  animation: color-fade 10s infinite;
}*/

/*@-webkit-keyframes color-fade {
  0% { background: #9a5342; }
  25% { background: #fffc0c; }
  50% { background: #e46d00; }
  75% { background: #ff3506; }
  100% { background: #9a5342; }
}*/