JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="car">
  <div class="carbody"></div>
  <div class="weel weel1"></div>
  <div class="weel weel2"></div>
</div>

CSS

/*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)
  }
  35% {
    transform: rotate(-500deg)
  }
  36%,
  56% {
    transform: rotate(-500deg)
  }
  100%{
    transform: rotate(-1000deg)
  }
}

@keyframes moving {
  0% {
    right: -80em;
    animation-timing-function: ease-out;
  }
  35% {
    right: 0;
  }
  36%,
  56% {
    right: 0;
    animation-timing-function: ease-in;
  }
  100% {
    right: 120%;
  }
}

@keyframes stableWheel {
  from {transform: translateY(-.0em);}
  to {transform: translateY(-.0em);}
}

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

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

.car{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  width: 600px;
  height:271px;
  overflow:hidden;
  animation: moving 10s linear -2s infinite;
}

.carbody{
  animation: carmove 3.1s infinite linear;
  background: url('http://nueva.autoescoladiesel.com/wp-content/uploads/car.png') 0 0;
  background-size: cover;
  height: 271px;
  position: relative; 
  width: 600px;
  z-index: 125;
}

.weel{
  /*animation: wheel 0.7s infinite linear;*/
  animation: wheel 10s linear -2s infinite;
  background: url('https://i.stack.imgur.com/0Osjx.png') 0 0;
  height: 85px;
  position: absolute;
  top: 67%;
  width: 85px;
  z-index: 200;
}

.weel1{left: 85px;}

.weel2{left: 454px;}

.stopedWeel{
     animation:...