学生静态网页作业仅使用 HTML CSS 怎么实现图片轮播效果

<div id="container">
    <div id="banner">
        <img src="images/1.jpg" />
        <img src="images/2.jpg" />
        <img src="images/2.jpg" />
    </div>
</div>

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
/* 容器大小和图片大小一致 */
 
#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}
/* 图片宽度*图片数量 */

#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}
/* 图片大小 */

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;  /* 图片宽度 */

	}
	70%, 100% {
		margin-left: -800px; /* 图片宽度*2 */

	}
}