CSS3實現圖片滾動

body{
                margin: 0;
                padding: 0px;
            }
            #banner{
                margin:20px auto;
                width: 600px; 
                position: relative; 
                overflow: hidden;
                height: 300px;
            }
            #banner img{
                width: 600px; 
            }
            #banner ul {
                display: flex; 
                position: absolute; 
            }
            #banner ul,
            #banner ul li{
                padding: 0;
                margin: 0;
                list-style:none; 
            }
        
            #banner ul{
                 animation: switch 20s linear 1s infinite alternate;
            }
        
            #banner ul:hover{
                 animation-play-state: paused; 
            }
        
            @keyframes switch{ 
                0%,13%{
                    left: 0;
                }
                27%,41%{
                    left: -600px;
                }
                55%,69%{
                    left: -1200px;
                }
                83%,100% {
                    left: -1800px;
                }
            }

<div id="banner">
                <ul> 
                    <li>
                        <img src="img/1.jpeg" />
                    </li>
                    <li>
                        <img src="img/2.jpeg" />
                    </li>
                    <li>
                        <img src="img/3.jpeg" />
                    </li>
                    <li>
                        <img src="img/4.jpeg" />
                    </li>
                </ul>
            </div>