SOURCE

<div class="container">
    <!-- 图片元素 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

.container{
    height: 200px;
    width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

ul{
    list-style: none;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    animation: scroll 10s infinite;
}

li:nth-child(1){
    height: 200px;
    width: 300px;
    background-color: red
}

li:nth-child(2){
    height: 200px;
    width: 300px;
    background-color: yellow
}
li:nth-child(3){
    height: 200px;
    width: 300px;
    background-color: blueviolet
}
li:nth-child(4){
    height: 200px;
    width: 300px;
    background-color: greenyellow
}
li:nth-child(5){
    height: 200px;
    width: 300px;
    background-color: lightcoral
}

@keyframes scroll{

    10%{
        left: 0px;

    }

    20%{
        left: 0px;
    }
    30%{
        left: -300px;

    }

    40%{
        left: -300px;

    }

    50%{
        left: -600px;

    }

    60%{
        left: -600px;
    }

    70%{
        left: -900px;
    }

    80%{
        left: -900px;

    }

    90%{
        left: -1200px;

    }

    100%{
        left: -1200px;

    }
}