Synchronize CSS Animation - Two Objects Followed

See this image above. I'm trying to get these two objects to start from the right and go left until they disappear.

I want one to stay behind the other, without knocking, not overlapping and I can not.

Code below:

img.trator-rodape {
  display: block;
  position: absolute;
  transform: translateX(1980px);
  bottom: 10px;
  width: 20%;
  max-width: 333px;
  animation-name: TratorRodape;
  animation-duration: 45s;
  animation-iteration-count: infinite;
}
img.caminhao {
  display: block;
  position: absolute;
  transform: translateX(2380px);
  bottom: 16px;
  width: 20%;
  max-width: 164px;
  animation-name: CaminhaoRodape;
  animation-duration: 135s;
  animation-iteration-count: infinite;
}
// Trator
@keyframes TratorRodape {
  10% {
    transform: translateX(1500px);
  }
  20% {
    transform: translateX(1000px);
  }
  30% {
    transform: translateX(700px);
  }
  50% {
    transform: translateX(500px);
  }
  70% {
    transform: translateX(300px);
  }
  90% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-500px);
  }
}
// Caminhão
@keyframes CaminhaoRodape {
  10% {
    transform: translateX(1500px);
  }
  20% {
    transform: translateX(1000px);
  }
  30% {
    transform: translateX(700px);
  }
  50% {
    transform: translateX(500px);
  }
  70% {
    transform: translateX(300px);
  }
  90% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-200px);
  }
}

It has to be an infinite animation.