背景动画在 CSS 中放大和缩小幻灯片

Question

我正在尝试创建动画背景幻灯片，放大第一张图像，然后恢复正常下一张图像并缩放它，请问有什么想法吗？

.img-contaner {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: img 20s ease-in-out infinite;
background: url(./1.jpg);  
}
@keyframes img{
25%{
background: url(./2.jpg);
transform: scale(1.2); 
}
50%{
background: url(./3.jpg);
transform: scale(1.2); 
}
75%{
background: url(./4.jpg);
transform: scale(1.2); 
}
100%{
background: url(./1.jpg); 
transform: scale(1.2);
}
}

我试过这个，但图像保持缩放整个动画

Answer 1

• 不要使用background:速记覆盖背景图像。您将覆盖其他背景 * 样式。
• 将所有图像预加载到浏览器中，以防止使用伪:before
闪烁 它是"容器">
• 而不是"容器">
• 数学时间：
  4 张图像 + 4 次过渡 + 4 次暂停 =12。100 / 12 = 8.3以增量方式计算并下限或舍入要用作动画关键帧的值步骤：

/*QuickReset*/*{margin:0;box-sizing:border-box;}
.img-container {
position: fixed;
width: 100%;
height: 100%;
background: center / cover no-repeat;
animation: img 20s ease-in-out infinite;
}
/* Preload images to prevent flicker during animation */
.img-container:before {
content: "";
background-image:
url(//placehold.it/500x300/0bf?text=1),
url(//placehold.it/500x300/f0b?text=2),
url(//placehold.it/500x300/bf0?text=3),
url(//placehold.it/500x300/0fb?text=4);
}
@keyframes img {
0%, 8% {
background-image: url(//placehold.it/500x300/0bf?text=1);
transform: scale(1);
}

17% {
transform: scale(1.2);
}

25%, 33% {
background-image: url(//placehold.it/500x300/f0b?text=2);
transform: scale(1);
}

41% {
transform: scale(1.2);
}

50%, 58% {
background-image: url(//placehold.it/500x300/bf0?text=3);
transform: scale(1);
}

66% {
transform: scale(1.2);
}

75%, 83% {
background-image: url(//placehold.it/500x300/0fb?text=4);
transform: scale(1);
}

91% {
transform: scale(1.2);
}
}

<div class="img-container"></div>