body{
    background-image: url('rodovia.jpg');
    width: 1280px;
    height: 720px;
}

.container1{
    align-items: center;
}

.carro1 {
    translate: 550px 5px;
    width: 100px;
    height: 100px;
    }

.carro1 img{
    width: 200px;
    height: 200px;
}
.carro2 {
    translate: 20px 175px;
    width: 100px;
    height: 100px;
}
   .carro2 img{
    width: 200px;
    height: 200px;
}

@keyframes movcarro1 {
    0% {
        transform: translateY(0);
    }
    
    25%{
        transform: translateY(150%);
    }
    50% {
        transform: translateY(150%)
    }
        
    100% {
        transform: translateY(700%)
    }
}
        
@keyframes movcarro2 {
    0% {
        transform: translateX(0);
      }
    
    25% {
        transform: translateX(300%);
    }
    50% {
        transform: translateX(1500%);
      }
    100% {
          transform: translateX(1500%)
      }
    
}
        

.carro1{
    animation-name: movcarro1;
    animation-duration: 8s;
    animation-timing-function: ease;
    animation-direction: forwards;
    }
.carro2 {
    animation-name: movcarro2; 
    animation-duration: 8s;
    animation-timing-function: ease;
    animation-direction: forwards;
    }