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>