动画迭代计数循环无限

Question

[EDIT:在下面添加Js]

我有一个由4张图像组成的循环，我希望这些图像在其持续时间内淡入淡出，然后在最后一张图像上停止。当我改变"；动画迭代计数"；等于1，则在第一次迭代之后仍然存在另一个循环。第二个循环似乎要波涛汹涌得多，我认为这是因为动画持续时间剩下的时间。

我知道到目前为止，最后一张图像仍然会在我需要的地方淡出，只需在最后一张图片上暂停，这是我获得平滑的单循环图像后要解决的下一个问题。

据我所知，动画迭代次数的默认值是1，但我不确定为什么图像会继续循环。

下面是我的代码：

CSS：

@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
} 
#cf {
height: 100vh;
width: 100vw;
}
#cf img {
position:absolute;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
max-height: 85vh;
max-width: 75vw;
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 30s;
opacity: 0;
}

#cf img:nth-of-type(1) {
animation-delay: 15s;
}
#cf img:nth-of-type(2) {
animation-delay: 10s;
}
#cf img:nth-of-type(3) {
animation-delay: 5s;
} 
#cf img:nth-of-type(4) {
animation-delay: 0s;
} 

Javascript：

function App() {  
return (
<div id="container" style={{overflow:'hidden'}}>
<div id="cf">
<img src={image1}/>
<img src={image2}/>
<img src={image3}/>
<img src={image4}/>
</div>
</div>
</div>
);
}

如果我降低动画持续时间，图像之间的过渡就不会那么平滑，而且似乎会从一个图像跳到另一个图像。我想我一定错过了一些图像之间的时间安排，有什么公式我应该知道吗？

Answer 1

animation-fill-mode: forwards

将停止最后一个关键帧上的动画状态。