линейная остановка анимации css на 2 секунды при отображении нового

#jquery #css #animation #css-animations

#jquery #css #Анимация #css-анимации

Вопрос:

Код прямо сейчас движется вверх без паузы, когда он показывает содержимое <li>. Как сделать паузу между ключевыми кадрами?

 li {
  line-height: 50px;
}

#list-container {
  animation: li_move forwards 10s linear 1s infinite;
}

@keyframes li_move {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(calc((100% - 50px)*-1));
  }
}

 <div id="list-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Ответ №1:

Попробуйте дублировать состояния.

   11.8% {transform: translateY(-50px);}
  17.7% {transform: translateY(-50px);}

Предположим, мы останавливаем анимацию на 2 секунды, как и было запрошено, и анимируем на 1 секунду между ними. У нас есть 5 анимаций * 3 = (всего 15) 2 дополнительные секунды.

 animation: li_move forwards 17s ease-out

1 сек анимации составляет 100% / 17 = 5,9%. Каждые 5,9% анимации анимация будет длиться 1 сек. Мы можем создать таблицу Excel, чтобы лучше ее визуализировать и легко вводить числа.

 li {
  line-height: 50px;
}

#list-container {
  animation: li_move forwards 17s ease-out 
  1s infinite;
}

@keyframes li_move {
  0% {transform: translateY(0);}
  11.8% {transform: translateY(-50px);}
  17.7% {transform: translateY(-50px);}
  29.5% {transform: translateY(-100px);}
  35.4% {transform: translateY(-100px);}
  47.2% {transform: translateY(-150px);}
  53.1% {transform: translateY(-150px);}
  64.9% {transform: translateY(-200px);}
  70.8% {transform: translateY(-200px);}
  82.5% {transform: translateY(-250px);}
  88.5% {transform: translateY(-250px);}
  88.500001% {transform: translateY(0);}
}

 <div id="list-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Необязательно: вы также можете приостановить анимацию, наведя курсор мыши на div:

 #list-container:hover {
  animation-play-state: paused;
}

1. когда он достигает 6 и анимируется до 1, можно сделать 1 паузу? как и после 6, тогда, когда он достигает 1, он немедленно анимируется до 2

2. Я показал вам, как я рассчитал числа для анимированных остановок. Я добавил дополнительный скачок 88.500001% {transform: translateY(0);} он просто пропускает кадры, поэтому он не анимируется до начала. Ожидает 2 секунды анимации, прежде чем снова запустить цикл.