Animate the tuck with the road

Question

I am trying to animate the truck over road on the image. I have made the snipped for it below. all of images are on svg file. But i am not sure how to animate the tuck within the road. how can i animate the truck so that it goes within the road ?

.page-header {
  background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
  height: 800px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 790px;
}

.truck-1 {
  width: 100px;
    position: absolute;
    top: 57%;
    left: 29%;
    width: 80px;
}

.truck-2 {
  width: 100px;
    position: absolute;
    top: 76%;
    left: 62%;
    transform: rotate(32deg);
    width: 80px;
}

<div class="page-header">
  <img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
  <img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>

Answer 1

What you need to examine is CSS Animations. After that, you can go with something like this:

.page-header {
  position: relative;
  background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
  height: 800px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 790px;
}

.truck-1 {
  width: 100px;
  position: absolute;
  top: 57%;
  left: 29%;
  width: 80px;
  animation: truck1 5s infinite;
}

@keyframes truck1 {
  0% {
    top: 57%;
    left: 29%;
    transform: rotate(0);
  }
  20% {
    top: 68%;
    left: 20%;
    transform: rotate(0);
  }
  40% {
    top: 68%;
    left: 20%;
    transform: rotate(90deg);
  }
  60% {
    top: 30%;
    left: 5%;
    transform: rotate(90deg);
  }
  80% {
    top: 30%;
    left: 5%;
    transform: rotate(120deg);
  }
  100% {
    top: 10%;
    left: 5.5%;
    transform: rotate(120deg);
  }
}

<div class="page-header">
  <img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>

Also on JSFiddle.

Please note, in order to work with absolute positioning and percents, the parent element has to be position: relative;, or any other than static.