Остановка выпуска CSS Анимация на финальном изображении - PullRequest
Новая
       8

Остановка выпуска CSS Анимация на финальном изображении

1 голос
/ 24 апреля 2020

Я работаю над сценарием перехода 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>

1 Ответ

0 голосов
/ 24 апреля 2020

Сначала добавьте animation-fill-mode: forwards;, чтобы анимация возвращалась в исходное состояние после ее завершения sh.

Затем было бы лучше добавить селектор 0% и 100%. внутри @ ключевых кадров . Если этот селектор отсутствует, анимация может быть проблемной c. 

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