Верстка анимированного блока

Цена договорная • безналичный расчёт, электронные деньги
01 октября 2016, 22:04 • 1 отклик • 63 просмотра
На сайте petromasterdev.ru под блоком производители есть следующий анимированный блок(PSD: yadi.sk/d/K0e7x-lKuSbej).
Он частично реализован, но не до конца. Необходимо доделать.

Текущий вариант можно посмотреть тут: lumolink.ru/dev/petromast...
Исходный код здесь: yadi.sk/d/S0ZSKaaCv6hhe

Сценарий работы блока:
Когда мы доходим до этого блока, начинает работать анимация. Слайды анимации плавно друг в друга перетекают. yadi.sk/i/1jqAYkYvuSbqr
1. Смотрим на карту, появляются точки обслуживания, соединяются линиями в верхней точке, появляется текст «62 точки обслуживания, расположенных по всей России»;
2. Карта немного подъезжает, появляются поинты городов, где представлен Петромастер, появляется текст «31 город Российской Федерации»;
3. Ещё сильнее подъезжает, из-за пределов экрана начинают выезжать машинки и плавно кататься по заданным траекториям, появляется текст «13 457 грузовых машин и спецтехники обслуживается в наших шинных центрах».(возможно, без теней).
есть три сцены.

Описание сцен анимации:
Сцена 1. Тут сначала пустой слайд с картой и точками из сцены 1, тут точки соединяются в одну одновременно с появлением текста.
Сцена 2. Все, кроме карты пропадает, она увеличивается, подъезжает наверх. Вылезают поинты, одновременно появляется текст.
Сцена 3. То ли карта увеличивается до огромных размеров, то ли что. Но на заднем плане теперь градиент и выезжают машинки одновременно с появлением текста.

Что необходимо доделать/исправить:
1. Увеличение карты корректно работает только в сафари.
2. Нет следов движений машинок на третьей сцене.
3. Появление поинтов городов на второй сцены должно быть снизу вверх по отдельности в случайном порядке.
4. На первой сцене линии не полностью соответствуют макету. Нужно добиться большего сходства, необязательно точного.
5. Скорость анимации. Сделать зацикливание сцен по кругу.