如何让两个圆圈朝相反的方向移动？

<div id="circle1"></div>
<div id="circle2"></div>

#circle1, #circle2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}

#circle1 {
  top: 50px;
  left: 50px;
}

#circle2 {
  top: 150px;
  left: 150px;
}

var circle1 = document.getElementById("circle1");
var circle2 = document.getElementById("circle2");

var angle1 = 0;
var angle2 = 180;

function moveCircles() {
  var x1 = Math.cos(angle1 * Math.PI / 180) * 100;
  var y1 = Math.sin(angle1 * Math.PI / 180) * 100;
  var x2 = Math.cos(angle2 * Math.PI / 180) * 100;
  var y2 = Math.sin(angle2 * Math.PI / 180) * 100;
  
  circle1.style.transform = "translateX(" + x1 + "px) translateY(" + y1 + "px)";
  circle2.style.transform = "translateX(" + x2 + "px) translateY(" + y2 + "px)";

  angle1 += 1;
  angle2 += 1;
  
  requestAnimationFrame(moveCircles);
}

moveCircles();