Как сделать задержку анимации css между циклами?

Question

[Coreproseo]

У меня есть анимация которая после полной загрузки сразу же начинает загружаться заново.
Можно как-то сделать паузу между циклами, чтобы изображение в конце задерживалось на пару секунд?

Пример моей анимации: https://codepen.io/ijnqqoim-the-animator/pen/qBoXzVj

Comments

[Антон Антон]

Увеличить общую проддолжительность и добавить кейфрейм?

[Coreproseo]

Антон Антон, А на примере можете показать ? Я не очень в этом понимаю.

Answer 1

[ligvake]

Вы можете изменить анимацию кейфреймов css, чтобы создать задержку:

#p { 
  animation: strokeOffset 5s linear forwards; 
  animation-iteration-count: infinite;
}
   @keyframes strokeOffset { 
     50% {
       stroke-dashoffset: 0;
     }
     100% {
       stroke-dashoffset: 1;
     }
}

Логика такая:
1. От 0 процентов до 50 от времени анимации (в моем коде 5 секунд), анимация будет полностью выполняться, т.е. она проиграется за 5*50%=2.5 секунд.
Оставшиеся 2.5 секунды, с 50 до 100 процентов времени, она будет полностью заполнена и не меняться.
Вы можете поменять время анимации и время задержки в зависимости от своих нужд.