Как вращать элемент во круг центральной точки?

Question

[myskypesla]

Привет всем. Нужно сделать прелоадер и в виде индикатор загрузки будут зрачки глаз и они должны вращаться внутри ОВАЛА глаз. Изображение внизу. Помогите разобраться, как правильно это реализовать для прелоадера без подключения сторонних библиотек и кроссбраузерно?

Answer 1

[Дмитрий Клусевич]

codepen.io/cleric/pen/mfyaE

Answer 2

[asd111]

gif

Answer 3

[vadim_evdokimov13]

Попробуйте использовать @keyframes на зрачки. Но в данном случае они должны быть отдельными блоками

Answer 4

[Максим Тимофеев]

css: rotate + transition
каждый глаз отдельным блоком
или через svg