浏览器上未显示css关键帧动画

我的@keyframe CSS代码似乎还不错。它没有给出错误，但它根本没有显示在浏览器上。 html上的类名是img1。 我的@keyframe CSS代码似乎还不错。它没有给出错误，但它根本没有显示在浏览器上。 html上的类名是img1。 有人帮忙吗

.img1{
宽度：150px；
动画名称：pics；
动画持续时间：25秒；
动画迭代次数：1；
背景图片：url（“assets/pic1.png”）；
背景重复：无重复；
背景大小：100%；
边缘顶端：19像素；
边缘底部：19px；
}
@关键帧图片{
0% {
背景图片：url（“assets/pic8.jpg”）；
}
12.5% {
背景图片：url（“assets/pic1.png”）；
}
25% {
背景图片：url（“assets/pic2.png”）；
}
37.5% {
背景图片：url（“assets/pic3.jpg”）；
}
50% {
背景图片：url（“assets/pic4.jpg”）；
}
62.5% {
背景图片：url（“assets/pic5.jpg”）；
}
75% {
背景图片：url（“assets/pic6.jpg”）；
}
87.5% {
背景图片：url（“assets/pic7.jpg”）；
}
100% {
背景图片：url（“assets/pic8.jpg”）；
}
}

您的动画正在运行，但正如@Yudiz所说，您需要为

.img1

元素设置一个高度

---

背景图像

属性正在为元素设置背景图像，但il不会根据背景图像大小更改其大小。现在，您的

.img1

元素是150px大，0px高，因此它是不可见的。

您将该类添加到

？具有类“.img1”的元素的高度是多少？你查过了吗？如果元素没有高度，则无法查看背景图像。也可以请你分享js小提琴或HTML代码相同。