slider.css

*{
    padding: 0;
    margin: 0;
}

body{
    background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  height: 100vh;
}

.container {
    position: relative;
}

.container .wallper{
    width: 60vw;
    height: 75vh;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
    margin: 5rem auto;
    overflow: hidden;
}

.container .wallper-holder{
    display: grid;
    grid-template-columns: repeat(4,100%);
    height: 100%;
    width: 100%;
    animation: slider 30s ease-in-out infinite
     alternate;
}
.container #imagen-1{
   background-image: url(./image/167947-coche-deportivo-delorean-dmc_delorean-coche_pequeno-3840x2160.jpg);
   background-position: center;
}
.container #imagen-2{
    background-image: url(./image/169234-ferrari-deportivo-coche-carro_de_lujo-mercedes_benz-3840x2160.jpg);
    background-position: center;
 }
 .container #imagen-3{
    background-image: url(./image/169586-neon-gasolinera_de_neon-dodge_challenger-chrysler_neon-coche-3840x2160.jpg);
    background-position: center;
 }
 .container #imagen-4{
    background-image: url(./image/172798-mustang_shelby_gt500-ford_shelby_gt500_2020-ford_shelby_gt500_2021-ford_mustang_2020-shelby_mustang-3840x2160.jpg);
    background-position: center;
 }
 .container .button-container .button{
    background-color: aliceblue;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    display: inline-block;
    margin: .3rem;
 }
.container .button-container{
        position: absolute;
        left: 45%;
        bottom: 0%;
    }
    .button:hover{
        box-shadow: 0px 0px 7px 4px rgba(0,255,255,0.5);
    }
@keyframes slider {
    0%{
        transform: translateX(0);
    }
    10%{
        transform: translateX(-100%);
    }
    20%{
        transform: translateX(-100%);
    }
    30%{
        transform: translateX(-200%);
    }
    40%{
        transform: translateX(-200%);
    }
    50%{
        transform: translateX(-200%);
    }
    60%{
        transform: translateX(-300%);
    }
    70%{
        transform: translateX(-300%);
    }
    80%{
        transform: translateX(-300%);
    }
    90%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(0%);
    }
}