Radar effect with CSS

Question

I’m trying to make an animation like "radar" around an image using only CSS with @keyframes. I even managed to reach a result, except for the fact that I can not synchronize the two "waves" of the radar, 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 jQuery that has means to detect in which step the animation lies, but would like it to be only with CSS.

The goal is to synchronize the two waves, where, when one is in the middle of the animation, the other starts, and so on, that is, whenever one is in the middle, the other starts, 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 don’t get the desired sync. Theoretically both animations should have the same duration, only one starting after the other, so there would be a perfect sync.

It’s possible and how could I do it with @keyframes?

Answer 1

Just add a delay in the animation of the second "wave" with half the time of the animation of the first wave: animation-delay: 1.5s;.

Behold:

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 3s infinite;
   animation-delay: 1.5s;
}


@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>

W3schools - CSS animation-delay Property (documentation in English)