<div class="wrapper">

  <div class="background">
    <div class="roadWrapper">
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="line-3"></div>
      <div class="line-4"></div>
      <div class="line-5"></div>
      <div class="line-6"></div>
      <div class="line-7"></div>
    </div>
    <div class="animationWrapper">
      <div class="bounce">
        <div class="shadow rc"></div>
        <img src="https://cdn.sanity.io/images/0ugmrqfk/production/29156fa1f1d1ee026c147e156f778a029f22989a-512x512.png" alt="racingCar" class="racingCar" />
      </div>
    </div>
    <div class="animationWrapper">
      <div class="bounce">
        <div class="shadow c"></div>
        <img src="https://cdn.sanity.io/images/0ugmrqfk/production/b31a671a6f0ad6f3682c1a881b76650e2aa76e0c-512x512.png" alt="car" class="car" /></div>
    </div>
    <div class="animationWrapper">
      <div class="bounce">
        <div class="shadow m"></div>
        <img src="https://cdn.sanity.io/images/0ugmrqfk/production/42a259b3c92dbb7da5dbfc862881cd1a9ed5d17d-512x512.png" alt="motorcycle" class="motorcycle" /></div>
    </div>
    <div class="animationWrapper">
      <div class="bounce">
        <div class="shadow s"></div>
        <img src="https://cdn.sanity.io/images/0ugmrqfk/production/6b62730d88c9d85157cc7d93110f7f7002c87d69-512x512.png" alt="scooter" class="scooter" /></div>
    </div>
    <div class="animationWrapper">
      <div class="bounce">
        <div class="shadow b"></div>
        <img src="https://cdn.sanity.io/images/0ugmrqfk/production/6162f5a961b44d1e1d76bce248c98e82e30aa8d0-512x512.png" alt="bicycle" class="bicycle" /></div>
    </div>
  </div>
  <div class="cardsWrapper">
    <label class="cardWrapper" for="veryFast">
    <input
           checked="checked"
           type="radio"
           name="speed"
           id="veryFast"
           value="1000"
           />
      <div class="title">Very Fast</div>
      <div>1000ms</div>
    </label>
    <input
           type="radio"
           name="speed"
           id="fast"
           value="2000"
           />
    <label class="cardWrapper" for="fast">
      <div class="title">Fast</div>
            <div>2000ms</div>

    </label>
    <input
           type="radio"
           name="speed"
           id="normal"
           value="3000"
           />
    <label class="cardWrapper" for="normal">
      <div class="title">Normal</div>
            <div>3000ms</div>

    </label>
    <input
           type="radio"
           name="speed"
           id="slow"
           value="4000"
           />
    <label class="cardWrapper" for="slow">
      <div class="title">Slow</div>
            <div>4000ms</div>

    </label>
    <input
           type="radio"
           name="speed"
           id="very slow"
           value="5000"
           />
    <label class="cardWrapper" for="very slow">
      <div class="title">Very Slow</div>
            <div>5000ms</div>

    </label>
  </div>
</div>
<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    .cardsWrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
     
      input {
        display: none;
       
      }

      .cardWrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 80px;
        margin: 10px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
        background-color: #1f5f8b;
        cursor: pointer;
        font-family: "Montserrat", sans-serif;
        color: white;
        transition: all .4s ease-in-out;

        &:hover {
          background-color: #1891ac;
        }

        .title {
          font-size: 20px;
          font-weight: bold;
          padding-bottom: 5px;
        }
      }
    }

    .background {
      position: relative;
      display: flex;
      justify-content: center;
      width: 320px;
      height: 200px;
      background-color: white;
      margin-bottom: 20px;
      box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
      overflow: hidden;

      .roadWrapper {
        position: absolute;
        top: 150px;
        left: 60px;
        width: 200px;
        height: 3px;
        overflow: hidden;

        @for $i from 1 through 7 {
          .line-#{$i} {
            position: absolute;
            right: (-25 - $i * 5) + px;
            top: 0;
            height: 3px;
            width: (5 + $i * 5) + px;
            background: #222;
            border-radius: 3px;
            animation: lines 1000ms linear ($i * 7500 / 10) + ms infinite;
          }
        }
      }

      .motorcycle,
      .scooter,
      .car,
      .racingCar,
      .bicycle {
        position: relative;
        transform: scale(1);
        left: -200px;
        transition: all 1s ease-in-out;
        opacity: 0;
      }

      .shadow {
        position: absolute;
        opacity: 0;
        background-color: #222;
        border-radius: 50%;
        bottom: -35px;
        height: 10px;
        width: 120px;
        filter: blur(5px);
      }

      .m {
        bottom: -75px;
        margin-left: -5px;
        width: 100px;
      }

      .s {
        bottom: -83px;
        width: 95px;
        margin-left: -5px;
      }

      .racingCar {
        top: 65px;
        height: 125px;
      }

      .car {
        top: 65px;
        height: 125px;
      }

      .motorcycle {
        top: 90px;
        height: 90px;
      }

      .scooter {
        top: 90px;
        height: 80px;
      }

      .bicycle {
        top: 95px;
        height: 80px;
      }

      .b {
        bottom: -85px;
        margin-left: -8px;
        width: 100px;
      }

      .animationWrapper {
        position: absolute;
      }

      .bounce {
        position: relative;
        transform-origin: 50% 100%;
        width: 125px;
        animation: ride (0.5 * 1000 / 2) + ms ease-in-out infinite;
      }

      .driveIn {
        animation: driveIn 1000ms ease-in-out forwards;
      }

      .driveOut {
        animation: driveOut 1000ms ease-in-out forwards;
      }
    }
  }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}

@keyframes lines {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-250px, 0, 0);
  }
}

@keyframes ride {
  0%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }

  50% {
    opacity: 1;
    transform: scaleY(0.96);
  }
}

@keyframes driveIn {
  0% {
    opacity: 0;
    left: -200px;
  }
  10% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes driveOut {
  0% {
    opacity: 1;
    left: 0;
  }

  99% {
    opacity: 0;
    left: 250px;
  }

  100% {
    opacity: 0;
    left: -200px;
  }
}
View Compiled
$(document).ready(function() {
  $(".racingCar").addClass("driveIn");
  $(".rc").addClass("driveIn");

  $("input").on("click", function(e) {
    let value = this.value;
    $("img.driveIn")
      .addClass("driveOut")
      .removeClass("driveIn");
    $("div.driveIn")
      .addClass("driveOut")
      .removeClass("driveIn");
    $(".driveIn").css("animation-duration", value);
    setTimeout(function() {
      for (let i = 1; i < 8; i++) {
        $(`.line-${i}`).css("animation-duration", value + "ms");
        $(`.line-${i}`).css("animation-delay", i * 7500 / 10 + "ms");
        $(`.line-${i}`).css("right", value);
      }

      $(".bounce").css("animation-duration", 0.5 * value / 2 + "ms");
      switch (value) {
        case "5000":
          $(".bicycle").addClass("driveIn");
          $(".b").addClass("driveIn");
          break;
        case "4000":
          $(".scooter").addClass("driveIn");
          $(".s").addClass("driveIn");
          break;
        case "3000":
          $(".motorcycle").addClass("driveIn");
          $(".m").addClass("driveIn");
          break;
        case "2000":
          $(".car").addClass("driveIn");
          $(".c").addClass("driveIn");
          break;
        default:
          $(".racingCar").addClass("driveIn");
          $(".rc").addClass("driveIn");
          break;
      }

      setTimeout(function() {
        $("img.driveOut").removeClass("driveOut");
        $("div.driveOut").removeClass("driveOut");
      }, value);
    }, value / 10);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js