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

[Dave7044]

Приветствую! Есть анимация:

 

.animation {
    width: 212px;
    height: 261px;
    background-image: url(sprite.png);
    
            animation: animation 5000ms steps(30) infinite;
}

@keyframes animation {
   from { background-position:    0 -2328px; }
     to { background-position: 0 -10158px; }
}

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

Есть вариант просто добавить пустых кадров в конец, но как то это быдлокодом веет.

[sigma77]

https://webref.ru/css/animation-delay

Можно вставить и в комбинированное свойство https://webref.ru/css/animation

[Dave7044]

13 минуты назад, sigma77 сказал:

https://webref.ru/css/animation-delay

Можно вставить и в комбинированное свойство https://webref.ru/css/animation

Так это одна задержка перед анимацией и всё. А мне нужна задержка каждый раз в конце анимации перед очередным циклом.

[Launder]

Animation-delay добавит время ожидания и для первой анимации.

Не знаю, что Вас смущает, почему не ввести время задержки в анимацию (к 5000ms прибавить время задержки), и вместо from -> to использовать проценты.

Хм, правда в этом случае, анимация, вероятно, зависнет на том моменте, на котором указана его последняя координата, а Вам, наверное, нужно чтоб картинка вернулась назад... Но с другой стороны, у Вас же анимация по шагам, сделайте следующий кадр с нулевой координатой...

А вообще, если говорить более предметно, выложите Ваш мультик куда-нибудь в песочницу поиграться...

[Igor Schnaider]

7 минут назад, Dave7044 сказал:

Так это одна задержка перед анимацией и всё. А мне нужна задержка каждый раз в конце анимации перед очередным циклом.

Насколько я знаю, средствами CSS никак. Либо добавлять пустые ключевые кадры, как вы написали вначале, либо вообще через JS слушать событие animationend и после него возобновлять опять анимацию через заданный промежуток.