CSS Background Change

[kiwis]

I'm trying to make a background 'movie' or 'carousel'. Currently I have the following.

But I'd like to make it so that when a particular images loads it zooms and it's position changes. So zoom in and move to the left 200px. Then the next one zooms out.

Any ideas if and how this is possible?

.slider{
    width: 100vw;
    height:100vh;
    background:url(images/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    animation: slide 50s infinite;
    opacity: 0.2;
}
@keyframes slide{
    10%{
        background: url(images/2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    20%{
        background: url(images/3.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        transform: scale(2,2);
    }
    30%{
        background: url(images/4.webp);
        background-repeat: no-repeat;
        background-size: cover;
    }
    40%{
        background: url(images/5.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    50%{
        background: url(images/6.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    60%{
        background: url(images/7.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    70%{
        background: url(images/8.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    80%{
        background: url(images/9.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    90%{
        background: url(images/10.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
}