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>

I have updated my answer. Animate the truck that runs within the road on the background. — umanga shrestha, Aug 20 '20 at 12:55

skobaljic · Accepted Answer · 2020-08-20T12:32:34.727

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.

This helped. Thanks a lot. – umanga shrestha Aug 21 '20 at 14:25 — umanga shrestha, Aug 21 '20 at 14:25

score 1 · Answer 2 · answered Aug 20 '20 at 12:49

Did you need it?

.page-header {
  animation: trucks 10s infinite;
  background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
  height: 800px;
  background-size: 100%;
  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;
}

@keyframes trucks {  
  0% {background-position: 0 0; } 
  100% {background-position: 0 -2100px; } 
}

<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>

Animate the tuck with the road

2 Answers2