Как заставить CSS-анимацию повторяться?

Question

[Иван Федоров]

Вот ссылка на анимацию https://jsfiddle.net/yazmj35s/ Как сделать, чтобы эффект повторялся с периодичностью в несколько секунд?

Answer 1

[Евгений Вольф]

animation-iteration-count: infinite;? Пример

Comments

[Иван Федоров]

Да, спасибо, с этим понял. А как сделать задержку между итерациями?

[Евгений Вольф]

По идее, можно добавить "animation-delay", но как мне показалось он не всегда работает... По этому, можно "эмитировать" задержку, сделав часть анимации (например 0%-30%) активной (например, что-то двигается), а часть анимации (например, 31%-100%) "пассивной" (в состоянии когда анимации завершилась), тогда оставшиеся 70% (длительности анимации) - будут "задержкой". Соотв. время анимации нужно будет выставить больше.

[Иван Федоров]

Евгений Вольф: animation-delay срабатывает только перед началом цикла.

[Евгений Вольф]

Иван Федоров: думаю, последний описанный мной вариант - решит проблему.

[Иван Федоров]

Евгений Вольф: Да, верно. Спасибо. Заодно в анимациях разобрался.

Answer 2

[Павел]

Вариант