how to grouping image css responsive

How to grouping some image animation in css for keep position and responsive? Check this image for what I was created enter image description here

and this is my code css

@media (min-width:1024px) and (max-width:1366px){
* {padding: 0; margin: 0; overflow-x: hidden;}

img.car {
width: 10%;
z-index: 4;
top: 660px;
position: absolute;
animation-name: moveCar;
animation-iteration-count: infinite;
animation-duration: 17s;
animation-timing-function: linear;
animation-delay: -1s;
}


img.ambulance {
width: 9%;
z-index: 3;
top: 600px;
position: absolute;
animation-name: moveCar2;
animation-iteration-count: infinite;
animation-duration: 25s;
animation-timing-function: linear;
animation-delay: -1s;
}

@keyframes moveAwan1 {
from {left: 100%;}
to   {left: -100%;}
}

@keyframes moveMan {
from {left: -100%;}
to   {left: 100%;}
}
}

if you have idea and suggest for my problem, hope you could help me, thanks