设置两个圆的动画，使其恰好在中间相交

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

.circle1, .circle2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<div class="circle1 animate__animated animate__fadeInLeft"></div>
<div class="circle2 animate__animated animate__fadeInRight"></div>

const circle1 = document.querySelector('.circle1');
const circle2 = document.querySelector('.circle2');

circle1.addEventListener('animationend', () => {
  circle1.style.left = '50%';
  circle2.style.left = '50%';
  circle2.style.transform = 'translateX(-50%)';
});