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

Question

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

.img1 {
width: 150px;
animation-name: pics;
animation-duration: 25s;
animation-iteration-count: 1;
background-image: url("assets/pic1.png");
background-repeat: no-repeat;
background-size: 100%;
margin-top: 19px;
margin-bottom: 19px;
}
@keyframes pics {
0% {
background-image: url("assets/pic8.jpg");
}
12.5% {
background-image: url("assets/pic1.png");
}
25% {
background-image: url("assets/pic2.png");
}
37.5% {
background-image: url("assets/pic3.jpg");
}
50% {
background-image: url("assets/pic4.jpg");
}
62.5% {
background-image: url("assets/pic5.jpg");
}
75% {
background-image: url("assets/pic6.jpg");
}
87.5% {
background-image: url("assets/pic7.jpg");
}
100% {
background-image: url("assets/pic8.jpg");
}
}

Answer 1

您的动画正在工作，但正如@Yudiz所说，您需要为.img1元素设置高度。

background-image属性是为您的元素设置背景图像，但 il 不会根据您的背景图像大小更改他的大小。现在，您的.img1元素是 150px 大，0px 高，所以它是不可见的。