使用CSS3动画设置间隔

Question

我正在尝试用CSS创建一种幻灯片。我设置了几个背景图像，逐渐淡出。但是，我不能做的是在图像和另一个图像之间设置几秒钟的间隔，因此它们在完全渲染后不会立即开始淡入淡出。我不想包含JQuery，否则项目已经很复杂，因为我已经使用了React。有任何想法吗？

CSS

.App {
  text-align: center;
  background-size: initial;
  animation: animatedBird 60s  infinite;
}

  @keyframes animatedBird {
    0% { background-image: url('../images/arch1.jpg');}    
    25% { background-image: url('../images/computer.jpg');}
    50% { background-image: url('../images/arch2.jpg');}
    75% { background-image: url('../images/computer.jpg');}
    100% { background-image: url('../images/arch1.jpg');} 
  }

Answer 1

一个想法是最初使用多个背景加载所有图像，这样你就不会对动画产生任何延迟：

body {
  background-image: 
  url('https://picsum.photos/800/800?image=1040'), /*put the first one on the Top*/
  url('https://picsum.photos/800/800?image=1069'), 
  url('https://picsum.photos/800/800?image=1042');
  background-size:cover;
  animation: animatedBird 10s infinite;
}

@keyframes animatedBird {
  0% {
    background-image: url('https://picsum.photos/800/800?image=1040');
  }
  25% {
    background-image: url('https://picsum.photos/800/800?image=1069');
  }
  50% {
    background-image: url('https://picsum.photos/800/800?image=1042');
  }
  75% {
    background-image: url('https://picsum.photos/800/800?image=1069');
  }
  100% {
    background-image: url('https://picsum.photos/800/800?image=1040');
  }
}

这是没有初始负载看到差异：

body {
  background-size:cover;
  animation: animatedBird 10s infinite;
}

@keyframes animatedBird {
  0% {
    background-image: url('https://picsum.photos/800/800?image=1041');
  }
  25% {
    background-image: url('https://picsum.photos/800/800?image=1068');
  }
  50% {
    background-image: url('https://picsum.photos/800/800?image=1043');
  }
  75% {
    background-image: url('https://picsum.photos/800/800?image=1068');
  }
  100% {
    background-image: url('https://picsum.photos/800/800?image=1041');
  }
}

UPDATE

要保持图像一段时间，您可以尝试这样做：

body {
  background-image: 
  url('https://picsum.photos/800/800?image=1040'), /*put the first one on the Top*/
  url('https://picsum.photos/800/800?image=1069'), 
  url('https://picsum.photos/800/800?image=1042');
  background-size:cover;
  animation: animatedBird 10s infinite;
}

@keyframes animatedBird {
  0%,20% {
    background-image: url('https://picsum.photos/800/800?image=1040');
  }
  25%,45% {
    background-image: url('https://picsum.photos/800/800?image=1069');
  }
  50%,70% {
    background-image: url('https://picsum.photos/800/800?image=1042');
  }
  75%,95% {
    background-image: url('https://picsum.photos/800/800?image=1069');
  }
  100% {
    background-image: url('https://picsum.photos/800/800?image=1040');
  }
}

Answer 2

你可以试试这个：

body {
  animation: animatedBird 10s infinite;
}

@keyframes animatedBird {
  0%, 25% {
    background-image: url('https://picsum.photos/800/800?image=1082');
  }
  50%, 75% {
    background-image: url('https://picsum.photos/800/800?image=1083');
  }
  100% {
    background-image: url('https://picsum.photos/800/800?image=1082');
  }
}