Как сделать перемещение обьектов по одному кругу, остановку всей анимации при наведении?

Question

[Никита Иванов]

Встала такая задача:
Вращать без остановки три обьекта по кругу, при наведении на любой из трех - останавливать все вращение.
Для наглядности того, какого типа вращение нужно картинка:


с горем пополам сделал вращение обьектов:

@-webkit-keyframes circulation {
    from { -webkit-transform: rotate(0deg) translateY(300px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateY(300px) rotate(-360deg); }
}

для обьектов 2 и 3 сделал animation-delay, чтобы они крутились не в о одном месте все, а с расстоянием друг от друга

данный метод не сильно устраивает, т.к. :
1) обьекты начинают крутиться не с загрузкой страницы, а через какое-то время, заданое animation-delay
2) остановить цсс-ом все обькеты, через animation-play-state: paused, при наведении, почему то у меня не получилось

так же смотрел в сторону плагина Circulate, но не понял как разделить обьекты, то есть сделать то, что делал в первом случае через animation-delay

прошу посоветовать что-нибудь для решения моего вопроса, хотя бы в какую сторону искать, может быть, есть библиотеки какие-нибудь для такого

Answer 1

[Сергей Новиков]

А если отрисовать это все на canvas? При помощи этого например?