CSS轮播图 图片放大片CSS里面怎么实现

div CSS轮播图 图片只能放到CSS里面怎么实现

如有帮助，请采纳。

<div id="container">
    <div id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

CSS部分

#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;
    }
}

图片要放到CSS？直接设置background-image背景图片？