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

更新

要保留图像一段时间，可以尝试以下操作：

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

使用CSS3动画设置间隔

2 个答案: