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

Question

[Mazino]

Страдаю фигней в целях практики, в итоге сделал что-то вроде этого(Осторожно, получилось прожорливо по ресурсам):
Теперь думаю как цепочку запустить по кольцу, сохранив при этом текущую анимацию. Подайте идею, а то уже мозг плывет. Советы про оптимизацию тоже были бы не лишними.

Answer 1

[Ivan Bogachev]

как цепочку запустить по кольцу, сохранив при этом текущую анимацию

Не претендую на точное повторение вашей анимации, но получится что-то в таком духе:

Comments

[Mazino]

Ни строчки js... Это какое-то css вуду. Жаль я почти ничего не понял )

[Ivan Bogachev]

Mazino, в редакторе CodePen есть кнопочка "View compiled CSS", там чистый CSS без хитростей препроцессора - он может быть для вас понятнее, чем исходник.

[Ivan Bogachev]

Mazino, Тут Ana Tudor нашаманила альтернативный вариант этой анимации (правда без поддержки IE/Edge). Очень советую посмотреть в образовательных целях:



P.S.: Количество элементов действительно можно уменьшить в два раза, тут я затормозил немного, но спишем это на воскресенье.

[Mazino]

Ivan Bogachev, хоть подобные способы проще и практичней, но для меня они слишком высокоуровневые, мне больше интересно как описать это функцией примерно так, как это происходит под капотом. Т.е вычислять куда подвинуть эту пачку пикселей на очередном кадре.