CodePen Embed - pure css car

<body>
<div class="road">
  <div class="mountain"></div>
  <div class="car">
    <div class="car-part"></div>
     <div class="car-part2"></div>
    <div class="car-part3"></div>
    <div class="car-part4"></div>
     <div class="car-part5"></div>
    <div class="window">
    </div>
     <div class="window2">
    </div>
    <div class="light"></div>
    <div class="light-beam"></div>
    <div class="door">
    </div>
    <div class="silencer"></div>
    <div class="smoke"></div>
    <div class="smoke1"></div>
    <div class="smoke2"></div>
    <div class="smoke3"></div>
    
  </div>
  <div class="wheel">
    
  </div>
   <div class="wheel2">
  </div>
  <div class="tree">
    <div class="leaves"></div>
    <div class="leaves1"></div>
    <div class="leaves2"></div>
    <div class="branch"></div>
    <div></div>
    
  </div>
  <div class="tree small">
    <div class="leaves "></div>
    <div class="branch"></div>
    <div></div>
    
  </div>
  <div class="cloud"></div>
</div>
</body>

.road {
  width: 500px;
  height: 400px;
  border-bottom: 1px solid white;
  position: relative;
  overflow: hidden;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bba3e6;
}
.car {
  display: flex;
}
.car-part {
  width: 12px;
  height: 60px;
  background-color: #ffdf54;
  position: absolute;
  bottom: 20px;
  left: 66px;
  border-radius: 20px 0px 0px 20px;
  animation: car 1s infinite;
}
.car-part2 {
  height: 76px;
  width: 31px;
  border-radius: 20px 0px 0px 0px;
  position: absolute;
  bottom: 20px;
  left: 77px;
  background-color: #ffdf54;
  animation: car 1s infinite;
}
.car-part3 {
  height: 140px;
  width: 100px;
  border-radius: 80px 0px 0px 0px;
  position: absolute;
  bottom: 20px;
  left: 100px;
  animation: car 1s infinite;
  background-color: #ffdf54;
}
.car-part4 {
  height: 140px;
  width: 110px;
  border-radius: 0px 70px 0px 0px;
  position: absolute;
  bottom: 20px;
  border-left: 1px solid #b5ae9f;
  animation: car 1s infinite;
  left: 200px;
  background-color: #ffdf54;
}
.car-part5 {
  height: 83px;
  width: 80px;
  border-radius: 0px 40px 10px 0px;
  position: absolute;
  bottom: 20px;
  left: 290px;
  background-color: #ffdf54;
  animation: car 1s infinite;
}
.window {
  height: 53px;
  background-color: white;
  width: 70px;
  position: absolute;
  bottom: 94px;
  left: 118px;
  opacity: 90%;
  animation: window 1s infinite;
  border-radius: 80px 10px 10px 10px;
}
.small {
  transform: scale(0.7);
  bottom: -160px;
  right: -400px;
  animation-delay: 2s !important;
}
.small .leaves {
  width: 0;
  height: 0;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 207px solid #8d9e75;
  width: 1px;
  z-index: -1;
  position: absolute;
  top: 104px;
  right: 0px;
}
.leaves {
  width: 0;
  height: 0;
  border-left: 67px solid transparent;
  border-right: 67px solid transparent;
  border-bottom: 67px solid #557528;
  width: 1px;
  z-index: -1;
  position: absolute;
  top: 104px;
  right: 0px;
}
.leaves1 {
  width: 0;
  z-index: -1;
  height: 0;
  border-left: 84px solid transparent;
  border-right: 84px solid transparent;
  border-bottom: 84px solid #557528;
  width: 1px;
  position: absolute;
  top: 154px;
  right: -20px;
}
.leaves2 {
  width: 0;
  z-index: -1;
  height: 0;
  border-left: 95px solid transparent;
  border-right: 95px solid transparent;
  border-bottom: 95px solid #557528;
  width: 1px;
  position: absolute;
  top: 211px;
  right: -33px;
}
.window2 {
  height: 53px;
  background-color: white;
  width: 87px;
  position: absolute;
  bottom: 94px;
  opacity: 90%;
  left: 208px;
  animation: window 1s infinite;
  border-radius: 10px 80px 10px 10px;
}
.cloud {
  width: 200px;
  height: 40px;
  background: #e5f3ff;
  top: 70px;
  right: -520px;
  position: relative;
  opacity: 60%;
  z-index: -2;
  animation: cloud 5s infinite;
  border-radius: 50px;
  display: block-inline;
  animation-delay: 3.5s;
}
.cloud:before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  background: #e5f3ff;
  border-radius: 50%;
  top: -50px;
  left: 20px;
}
.cloud:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 90px;
  background: #e5f3ff;
  top: -70px;
  left: 80px;
  border-radius: 50%;
}
.door {
  width: 16px;
  height: 6px;
  position: absolute;
  background-color: #666258;
  bottom: 76px;
  left: 210px;
  animation: door 1s infinite;
  border-radius: 20px;
}
.wheel {
  width: 55px;
  height: 55px;
  position: absolute;
  background-color: #666258;
  bottom: 0px;
  left: 90px;
  border-radius: 50%;
  animation: wheel 1s infinite;
}
.wheel2 {
  width: 55px;
  height: 55px;
  position: absolute;
  background-color: #666258;
  bottom: 0px;
  left: 307px;
  border-radius: 50%;
  animation: wheel 1s infinite;
}
.silencer {
  width: 20px;
  height: 10px;
  background-color: #666258;
  position: absolute;
  bottom: 30px;
  left: 45px;
  animation: silencer 1s infinite;
}
.smoke {
  width: 20px;
  height: 10px;
  background-color: white;
  position: absolute;
  bottom: 30px;
  left: 1px;
  opacity: 25%;
  border-radius: 50%;
  animation: smoke 1.5s infinite;
}
.tree {
  opacity: 80%;
  z-index: -2;
  animation: tree 4s infinite;
  position: relative;
}
.smoke1 {
  width: 17px;
  height: 10px;
  background-color: white;
  position: absolute;
  bottom: 33px;
  left: 2px;
  opacity: 27%;
  border-radius: 50%;
  animation: smoke1 1.5s infinite;
}
.smoke2 {
  width: 20px;
  height: 10px;
  background-color: white;
  position: absolute;
  bottom: 24px;
  left: 4px;
  opacity: 25%;
  border-radius: 50%;
  animation: smoke2 1.5s infinite;
}
.smoke3 {
  width: 14px;
  height: 10px;
  background-color: white;
  position: absolute;
  bottom: 32px;
  left: 3px;
  opacity: 20%;
  border-radius: 50%;
  animation: smoke3 1.5s infinite;
}
.branch {
  z-index: -1;
  width: 23px;
  height: 96px;
  position: absolute;
  top: 305px;
  background-color: #5c3e31;
  bottom: 0px;
  right: 50px;
}
@keyframes smoke3 {
  0% {
    left: 13px;
  }
  100% {
    left: -10px;
    opacity: 0;
  }
}

@keyframes smoke2 {
  0% {
    left: 14px;
  }
  100% {
    left: -14px;
    opacity: 0;
  }
}
@keyframes smoke1 {
  0% {
    left: 18px;
  }
  100% {
    left: -19px;
    opacity: 0;
  }
}
@keyframes smoke {
  0% {
    left: 23px;
  }
  100% {
    left: -14px;
    opacity: 0;
  }
}
@keyframes silencer {
  0% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
    bottom: 32px;
  }
}
@keyframes car {
  0% {
    bottom: 20px;
  }
  100% {
    bottom: 23px;
  }
}
@keyframes window {
  0% {
    bottom: 94px;
  }
  100% {
    bottom: 97px;
  }
}
@keyframes door {
  0% {
    bottom: 76px;
  }
  100% {
    bottom: 79px;
  }
}
@keyframes tree {
  0% {
    right: -236px;
  }
  100% {
    right: 576px;
  }
}
@keyframes cloud {
  0% {
    right: -526px;
  }
  100% {
    right: 596px;
  }
}
@keyframes wheel {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 1px;
  }
}
.mountain {
  position: absolute;
  right: -900px;
  bottom: -20px;
  width: 12px;
  height: 12px;
  opacity: 20%;
  z-index: -4;
  box-shadow: 0 0 0 50px white, 60px 50px 0 70px white, 90px 90px 0 50px white,
    250px 250px 0 50px white, 290px 320px 0 50px white, 320px 400px 0 50px white;
  transform: rotate(130deg);
  animation: mtn 20s linear infinite;
}
@keyframes mtn {
  100% {
    transform: translateX(-2000px) rotate(130deg);
  }
}
.light {
  width: 2px;
  height: 13px;
  background-color: #961b08;
  position: absolute;
  bottom: 50px;
  border-radius: 20px;
  left: 369px;
}
.light-beam {
  width: 0;
  z-index: -1;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 197px solid #ed640e;
  z-index: -1;
  transform: rotate(-90deg);
  width: 1px;
  position: absolute;
  top: 245px;
  left: 387px;
  opacity:40%;
  animation: light 1s infinite;
}
@keyframes light {
  0% {
    transform: rotate(-88deg);
  }
  0% {
    transform: rotate(-92deg);
  }
}

This Pen is owned by Samritha S on CodePen.

See more by @samritha on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.