Выбрал реализацию анимации с помощью stroke-dasharray
Так как объектов анимации очень много, то очень затруднительно писать для каждого объекта свою анимацию.
Решил разбить объекты на группы по функциональному признаку и, чтобы у каждой группы были примерно равны длины контуров.
Каждой группе присваивается свой класс, например - для человека слева - class="man"
, для фигуры справа - class="man2"
, для бордюров - class="border"
, для стрелок - class="arrow"
и так далее.
Элементы SVG нарисованы изначально двойными контурами, поэтому применены для рисования линий две анимации:
- Анимация stroke-dasharray
- Анимация заполнением цветом внутреннего контура
.man {
stroke-dasharray:0,1030;
animation:man_draw 5s linear forwards,man_fill 2s forwards 4.5s;
}
@keyframes man_draw{
100% {stroke-dasharray:1030,0;}
}
@keyframes man_fill{
0% {fill:none;}
100% {fill:black;}
}
Вторая анимация, заполнение цветом, начнется после окончания первой анимации рисования линии с задержкой равной продолжительности рисования линии.
Далее начинается анимация для следующего класса функциональной группы class="man2"
И так далее для остальных классов.
Update
Если для анимации необходимо использовать только часть изображения, например как в вопросе, диаграммы обведенные красной рамкой, то убирается часть правил CSS для неанимированных частей.
Полный вариант анимации
Сокращенный вариант