JSFiddle - React, Tailwind, and code Playground

HTML

<div id="round">
       <div class="css"></div> 
       <div class="css"></div>
       <div class="css"></div>
</div>

CSS

body {
	background:#000000;
}
.css {
	position: absolute;
	background:#6495c4;
	width:30px;
	height:30px;
	left: 70px;
	top: 40px;
	border: 3px solid #fff;
	cursor: pointer;
	border-radius: 19px;
	-webkit-border-radius: 19px;
	-moz-border-radius: 19px;
}
#round {
	position: absolute; 
	left: 50%;
	margin-left: -250px; 
	top: 100px; 
	width: 500px; 
	height: 500px;
	border: 5px solid #6495c4;
	border-radius: 250px;
	-webkit-border-radius: 250px;
	-moz-border-radius: 250px;
}

JavaScript

var radius = 250;
var speed = 150;

var divs = document.querySelectorAll('div.css');

for (var i = 0; i < divs.length; i++) {
	divs[i].addEventListener('click', function () {
		var div = this;

		animate(function (timePassed) {
			var coef = timePassed / 1000 * speed; // 1000 взята из головы для уменьшения чувствительности speed, timePassed можно и вовсе не преобразовывать
			var angle = coef * Math.PI / 180;

			div.style.left = 235 + radius * Math.sin(angle) + 'px';
			div.style.top = 235 + radius * Math.cos(angle) + 'px';
		}, 10); // Сюда передаётся задержка setInterval для управления FPS
	});
}

function animate(handler, delay) {
	var startTime = new Date();

	var timer = setInterval(function () {
		var timePassed = new Date() - startTime;

		handler(timePassed);
	}, delay || 16);

	return function stopAnimation() {
		clearInterval(timer);
	};
}