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

更新

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

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