如何使用CSS根据动停的汽车对车轮进行动画处理？

我正在尝试使用CSS为汽车设置动画。我设法使车轮和汽车动起来了。

汽车进站，停车然后下车。此动画循环播放。

现在，当汽车停下来时，我也需要停止轮子。但我似乎无法实现。

这是我到目前为止的内容：

@keyframes wheel{
 0%{
   transform: rotate(0deg)
  }
  
    35% {
    transform: rotate(-90deg)
  }
  36%,
  56% {
    transform: rotate(-180deg)
  }
  
 100%{
   transform: rotate(-359deg)
  }
}

@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);}
}


.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('https://i.stack.imgur.com/xWNOG.png') 0 0;
  background-size: cover;
  height: 271px;
  position: relative; 
  width: 600px;
  z-index: 125;
}



.weel{

  animation: wheel 0.7s infinite linear;
  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;}

/*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)}
}




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; }
}


.stopedWeel{
     animation: stableWheel .2s linear infinite alternate;
  
}

@keyframes wheel{
     0%{
       transform: rotate(0deg)
      }

        35% {
        transform: rotate(-90deg)
      }
      36%,
      56% {
        transform: rotate(-180deg)
      }

     100%{
       transform: rotate(-359deg)
      }
    }

.car{
  margin: 0 auto;
  position: relative;
  width: 400px;
  animation: moving 10s linear -2s infinite;
}
.car:before {
  content:"";
  display:block;
  animation: carmove 3.1s infinite linear;
  background: url('https://i.stack.imgur.com/xWNOG.png') center/cover;
  padding-top:45.25%;
}

.weel{
  animation: wheel 10s infinite -2s linear;
  background: url('https://i.stack.imgur.com/0Osjx.png') center/cover;
  position: absolute;
  bottom:0.8%;
  width: 14.15%;
}
.weel:before {
   content:"";
   display:block;
   padding-top:100%;
}
.weel1{left: 14.5%;}
.weel2{right: 10%;}

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

@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%;
  }
}

body {
  overflow:hidden;
}