Как сделать такую анимацию:
1. Сначала отрисовывалась линия в первом круге
2. Потом пошла стрелка до второго круга и остановилась
3. Отрисовка линии второго круга
4. Стрелка пошла к третьему кругу и остановилась
И так до пятого круга включительно, а потом пошла заново анимация
Спасибо, переделала под свой проект, у меня не получается останавливать стрелку перед кругом (я меняю значение переменной $to) - она останавливается то ближе к кругу, то дальше Codepen
Qurel, обновил ответ. Кружки должны быть строго по центру их родителя, иначе стрелочку не выровняешь.
PS. не обязательно творить магию с маски на svg, свойство stroke-dashoffset и без этого прекрасно анимируется.
Кружки строго по центру item, все item одинаковой ширины, вместо margin сделала padding и все равно стрелочка не одинаково перемещается.
Разница перемещения у left одинаковая - 21,75
