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

Question

[Qurel]

Как сделать такую анимацию:
1. Сначала отрисовывалась линия в первом круге
2. Потом пошла стрелка до второго круга и остановилась
3. Отрисовка линии второго круга
4. Стрелка пошла к третьему кругу и остановилась
И так до пятого круга включительно, а потом пошла заново анимация

Вот пока что получилось: Codepen

Answer 1

[RAX7]

Comments

[Qurel]

Спасибо, переделала под свой проект, у меня не получается останавливать стрелку перед кругом (я меняю значение переменной $to) - она останавливается то ближе к кругу, то дальше
Codepen

[RAX7]

Qurel, обновил ответ. Кружки должны быть строго по центру их родителя, иначе стрелочку не выровняешь.
PS. не обязательно творить магию с маски на svg, свойство stroke-dashoffset и без этого прекрасно анимируется.

[Qurel]

Это дизайнер так отрисовал иконки

[Qurel]

Кружки строго по центру item, все item одинаковой ширины, вместо margin сделала padding и все равно стрелочка не одинаково перемещается.
Разница перемещения у left одинаковая - 21,75

[RAX7]

Qurel, я же обновил в ответе arrowMove

[Qurel]

Спасибо, а что было не так? Вы добавили $offset: -38px;
Буду признательна, если объясните

[RAX7]

Qurel, я специально добавил туда $offset: -38px;, чтоб все было как задумано.