问题停止最终图像上的CSS动画

Question

我正在为虚拟毕业设计CSS转换脚本。我正试图让一个动画降落在最后一张幻灯片上，但一旦完成，它就会不断地翻回到第一张幻灯片。我不知道如何在完成的图像上停止最后的过渡。如果有人能帮我弄清楚我做错了什么，那将是一个巨大的帮助。

ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
float: left;
width: 100%;   
}
li {
position: absolute;
left: 0;
top:0;
}
img{
border: 0;
border-radius: 0;
box-shadow: 0;
width: 100%;
}
li:nth-child(4) {
animation: xfade 16s 0s 1;
}
li:nth-child(3) {
animation: xfade 16s 4s 1;
}
li:nth-child(2) {
animation: xfade 16s 8s 1;
}
li:nth-child(1) {
animation: xfade 16s 12s 1;
}
@keyframes xfade{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}

<ul>
<li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-4.jpg" /></li>
<li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-3.jpg" /></li>
<li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-2.jpg" /></li>    
<li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-1.jpg" /></li>
</ul>

Answer 1

首先，添加animation-fill-mode: forwards;以阻止动画在完成后返回到开始状态。

然后，最好在@keyframes内添加0%和100%选择器。如果缺少此选择器，则动画可能会出现问题。

@keyframes xfade{
0%, 17% {
opacity:1;
}
25% {
opacity:0;
}
92%, 100% {
opacity:0;
}
}