关键帧 CSS 中百分比之间的延迟

Question

我需要在一个div中更改各种图像，但我希望在图像与图像之间有1秒的延迟。我需要在关键帧的百分比之间设置延迟
这是我的代码

.imgWrapper{
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 500ms;
    animation: imgChanger 3s linear infinite;
    width: 500px;
    height: 300px;
}
@keyframes imgChanger {
    0%{
        background-image: url(Images/superblog/superblog1.png);
    }
    50%{
        background-image: url(Images/superblog/superblog2.png);
    }
    100%{
        background-image: url(Images/superblog/superblog3.png);
    }
}

我怎样才能做到这一点？谢谢！！！！

Answer 1

您可以在一帧中添加百分比，使其保持相同的图像。并增加动画的时间以匹配2秒的显示

.imgWrapper {
...
  animation: imgChanger 6s linear infinite;
...
}

@keyframes imgChanger {
  0%, 16.66% { 
    background-image: url('Images/superblog/superblog1.png');
  }
  33.33%, 49.99% {
    background-image: url('Images/superblog/superblog2.png');
  }
  66.66%, 83.33% {
    background-image: url('Images/superblog/superblog3.png');
  }
  100% {
    background-image: url('Images/superblog/superblog1.png');
  }
}
```