Использование css для анимации графики, а затем вращения на центральном графике

Question

У меня есть дизайн сайта, где у меня 7 графических изображений (все те же размеры). Требование состоит в том, чтобы они могли лететь со стороны в линию, следуя слегка изогнутой траектории. Первый будет идти в середину, остальные затем войдут на орбиту вокруг первой, пока все 6 не окажут равномерное окружение, после чего все они остановятся. Наконец, центральная графика должна пульсировать.

Я не уверен, что я это очень хорошо объяснил!

К сожалению, есть несколько из них с разной графикой, поэтому я не хочу просто делать это как анимированный gif или что угодно. Я видел несколько сообщений, показывающих, например, как использовать CSS, чтобы показать космический корабль, постоянно вращающийся вокруг планеты, или следовать за искривленным путем, но могу ли я настроить это так, как я описываю? Как мне сделать «историю» пройти фазы?

ТИА

Answer 1

Использование CSS смещения-путь или движение-путь, вы можете создать другой путь для каждого из элементов. Добавляя задержку движения каждого элемента, я думаю, вы можете создать такую ​​анимацию.

Создание пути для каждого элемента будет непростым, но here - это учебник по достижению анимации по круговой траектории с использованием смещения по CSS.