背景动画在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: shorthand 的背景图像。您将覆盖其他 background-* 样式。
• 将所有图片预加载到浏览器中，以防止使用 :before 伪图像闪烁
• 它是 "container" 而不是 "contaner"
• 数学时间：
  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>