Edit in JSFiddle

//find the position of the center circle
var center = $(".center-circle").position(),
		//25. Grabs one of the outer circles' diameters and divides by 2 to find the radius
    circleradius = $(".circle1").width() /2,
    //25. Grabs the center circle's diameter and divides by 2 to find the radius
    centerradius = $(".center-circle").width() /2,
    //175. Finds the point around the main circle on the x-axis, given the center circle's left position added to the center circle's radius. Manually updating "center.left" will cause the outer circles to move left or right on the x-axis drawn through the center circle
    xaxis = center.left + centerradius,
    //175. Finds the point around the main circle on the y-axis, given the center circle's left position added to the center circle's radius. Manually updating "center.top" will cause the outer cirlces to move up and down on the y-axis drawn through the center circle
    yaxis = center.top + centerradius,
    x, y, angle = 0, angles = [],
    //where to position the outer circles, evenly around the center circle. Divide 360 by how many outer circles
    space = 360 / 4,
    //find radians per degree
    //0.017453292519943295
    radians = Math.PI / 180,
    i = 0;
    
//loop through the circles
for(;i < 4; i++) {
    //space = 90; 
    //angle = 90, 180, 270, 360
    //angles = 0, 90, 180, 270
    angles.push(angle);
    angle += space;
}

//How far circles are out from the main point. If "20" is manually changed: larger number = spaced out further from the center point; smaller number = closer to the center point
centerradius += (circleradius + 20);

loop();

function loop() {
    for(var i = 0; i < angles.length; i++) {
        angle = angles[i];
        //x = 175 + 25 * Math.cos(angle * 0.017453292519943295)
        x = xaxis + centerradius * Math.cos(angle * radians);
        //x = 175 + 25 * Math.sin(angle * 0.017453292519943295)
        y = yaxis + centerradius * Math.sin(angle * radians);
        //for each circle, find the left and top coords to animate
        $(".circle" + i).css({left:x - circleradius, top:y - circleradius}); 
        //negative number makes it go counter clockwise. positive makes it go clockwise. The larger the number, the faster it goes
        angles[i] = angles[i] + 1;
    }   
    requestAnimationFrame(loop);
}

<div class="border animated-circle center-circle">&nbsp;</div>
<div class="border animated-circle circle0">&nbsp;</div>
<div class="border animated-circle circle1">&nbsp;</div>
<div class="border animated-circle circle2">&nbsp;</div>
<div class="border animated-circle circle3">&nbsp;</div>

.border {
    border-radius:50%;
    position:fixed;
}
.animated-circle {
    width:50px;
    height:50px; 
}
.center-circle {
    left:150px;
    top:150px;
    background-color: #000000;
}
.circle0 {
  background-color: red;
}
.circle1 {
  background-color: blue;
}
.circle2 {
  background-color: purple;
}
.circle3 {
  background-color: green;
}