Javascript css中的背景动画放大和缩小幻灯片

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

    .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);
    }

     }

我试过了，但图像在整个动画中保持缩放状态

• 不要使用覆盖背景图像。您将覆盖其他背景-*样式
• 使用

  ：before

  伪代码将所有图像预加载到浏览器中，以防止闪烁
• 这是“容器”而不是“容器”
• 数学时间：
  4个图像+4个过渡+4个暂停=12

  100/12=8.3

  以增量方式计算要用作动画关键帧的地板或四舍五入值步骤：

/*QuickReset*/*{margin:0；框大小：border-box；}
.img集装箱{
位置：固定；
宽度：100%；
身高：100%；
背景：中心/盖无重复；
动画：img20s易入易出无限；
}
/*预加载图像以防止动画期间闪烁*/
.img容器：之前{
内容：“；
背景图像：
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）；
}
@关键帧img{
0%, 8% {
背景图像：url（//placehold.it/500x300/0bf？text=1）；
变换：比例（1）；
}
17% {
转换：比例（1.2）；
}
25%, 33% {
背景图像：url（//placehold.it/500x300/f0b？text=2）；
变换：比例（1）；
}
41% {
转换：比例（1.2）；
}
50%, 58% {
背景图像：url（//placehold.it/500x300/bf0？text=3）；
变换：比例（1）；
}
66% {
转换：比例（1.2）；
}
75%, 83% {
背景图片：url（//placehold.it/500x300/0fb？text=4）；
变换：比例（1）；
}
91% {
转换：比例（1.2）；
}
}

• 不要使用覆盖背景图像。您将覆盖其他背景-*样式
• 使用

  ：before

  伪代码将所有图像预加载到浏览器中，以防止闪烁
• 这是“容器”而不是“容器”
• 数学时间：
  4个图像+4个过渡+4个暂停=12

  100/12=8.3

  以增量方式计算要用作动画关键帧的地板或四舍五入值步骤：

/*QuickReset*/*{margin:0；框大小：border-box；}
.img集装箱{
位置：固定；
宽度：100%；
身高：100%；
背景：中心/盖无重复；
动画：img20s易入易出无限；
}
/*预加载图像以防止动画期间闪烁*/
.img容器：之前{
内容：“；
背景图像：
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）；
}
@关键帧img{
0%, 8% {
背景图像：url（//placehold.it/500x300/0bf？text=1）；
变换：比例（1）；
}
17% {
转换：比例（1.2）；
}
25%, 33% {
背景图像：url（//placehold.it/500x300/f0b？text=2）；
变换：比例（1）；
}
41% {
转换：比例（1.2）；
}
50%, 58% {
背景图像：url（//placehold.it/500x300/bf0？text=3）；
变换：比例（1）；
}
66% {
转换：比例（1.2）；
}
75%, 83% {
背景图片：url（//placehold.it/500x300/0fb？text=4）；
变换：比例（1）；
}
91% {
转换：比例（1.2）；
}
}

---

@blex给你：

@blex给你：

不，这不是我想要的，而是谢谢你的帮助，不，这不是我想要的，而是谢谢你的帮助，