Css - Анимация элементов на сайте

В общем надо, чтобы при ховере на весь блок эти чёрные Кружки немного разъезжались, каждый в своём направлении и меняли градус наклона
Как это можно сделать? Ну самый простой способ - сохранить каждый кружок отдельно, margin-ами поставить их в начальное положение и потом при ховере - делать для каждого кружка transform: translate() rotate()
Но может есть какой-то более элегантный способ? Как-то по другому можно?