问题：在最终图片上停止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; 来阻止动画结束后回到开始状态。

那么，最好在动画中加入 0%和100%选择器 里面 @关键帧. 如果缺少这个选择器，动画可能会出现问题。

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