Radar effect with CSS

I'm trying to make a "radar" animation around an image using only CSS with @keyframes. I even managed to come up with a result, except for the fact that I can't synchronize the two radar "waves", see:

body{
   margin: 0;
}

#container{
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #E2FDFF;
   height: 100vh;
   position: relative;
}

#thumb{
   width: 50px;
   height: 50px;
   border: 5px solid #000;
   border-radius: 50%;
   background-image: url(https://cdn2.vectorstock.com/i/thumb-large/41/11/flat-business-woman-user-profile-avatar-icon-vector-4334111.jpg);
   background-size: 80px 80px;
   background-position: center;
   z-index: 2;
}

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

.circle1{
   animation: circ1 3s infinite;
}

.circle2{
   animation: circ2 1.5s infinite;
}


@keyframes circ1 {
   from{
      transform: scale(1);
      opacity: 1;
   }

   to{
      transform: scale(5);
      opacity: 0;
   }
}

@keyframes circ2 {
   from{
      transform: scale(1);
      opacity: 1;
   }

   to{
      transform: scale(5);
      opacity: 0;
   }
}

<div id="container">

   <div id="thumb"></div>
   <span class="circle1"></span>
   <span class="circle2"></span>

</div>

I thought I'd do with animate from jQuery which has means to detect what step the animation is in, but I'd like it to be only with CSS.

The goal is to synchronize the two waves, where, when a half of the animation, the other start, and so on, that is, whenever one is in half, the other start, so that there is a synchronization.

I tried to put different times in each one (circ1 and circ2), but both start at the same time and do not get the desired sync. Theoretically both animations should have the same duration, only one starting after the other, because there would be a perfect synchronization.

Is it possible and how could I do this with @keyframes?