Как повторить набор анимаций?

Question

[Влад]

Играюсь с CSS, делаю простую анимацию загрузки по увиденной в интернете картинке. Как зациклить набор анимаций ? Ключевое слово infinite зацикливает только одну из них.



Рассмотрю любые идеи :)

Comments

[Ankhena]

Записать всю траекторию в одну анимацию.

[Влад]

Ankhena, окей записал в один кейфрейм. Теперь другая проблема, они все двигаются одновременно. Не пойму как задать индивидуально задержку в нужном порядке ?

[Ankhena]

Влад,

Не пойму как задать индивидуально задержку в нужном порядке ?

Можно через кастомное свойство.

Но тут, мне кажется, это не поможет и придется каждому задавать свою анимацию.

[Irkov]

здесь каждый кубик двигается по одному шагу, и когда шаги заканчиваются - кубик останавливается. Если бы анимация одного кубика включала в себя весь путь, который проходит кубик, то его можно было бы обновить с помощью infinite. То есть необходимо прописать индивидуальные пути для каждого из 7 кубиков и будет счастье.

[Влад]

Irkov, уже решил именно так. Одна анимация на всех + задержка на длительность хода. Регулируя длительность остановок можно получить две полноценных анимации, и еще одну ущербную анимацию сворачивания в один квадрат.