body {
  margin: 0;
  padding: 0;
}

.cars-race {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.cars-race .road {
  width: 100%;
  height: 30px;
  position: relative;
  padding: 10px;
  background-color: whitesmoke;
}

.cars-race .road::before {
  position: absolute;
}

.cars-race .road img {
  width: 50px;
  height: 50px;
  margin: 0px;
  bottom: 0;
  position: absolute;
  object-fit: contain;
  animation: car 2s infinite;
  user-select: none;
}

.cars-race .road:nth-child(1)::before {
  content: 'linear';
}

.cars-race .road:nth-child(1) img {
  animation-timing-function: linear;
}

.cars-race .road:nth-child(2) img {
  animation-timing-function: ease;
}

.cars-race .road:nth-child(2)::before {
  content: 'ease';
}

.cars-race .road:nth-child(3) img {
  content: 'ease-in';
  animation-timing-function: ease-in;
}

.cars-race .road:nth-child(3)::before {
  content: 'ease-in';
}

.cars-race .road:nth-child(4) img {
  animation-timing-function: ease-out;
}

.cars-race .road:nth-child(4)::before {
  content: 'ease-out';
}

.cars-race .road:nth-child(5) img {
  animation-timing-function: ease-in-out;
}

.cars-race .road:nth-child(5)::before {
  content: 'ease-in-out';
}

@keyframes car {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - 100px);
  }
}