Radar effect with CSS

Question

Radar effect with CSS

Navigation

#1 by (7 votes)

5

I'm trying to make a "radar" animation around an image using only CSS with @keyframes . I even managed to get a result, except 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 of doing with animate of jQuery that has means to detect where the animation is, but I would like it to be CSS only.

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 synchrony.

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 synchrony. Theoretically, both animations should have the same duration, only one starting after the other, because that would be a perfect synchrony.

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

css css-animations

asked by anonymous 02.01.2019 / 21:53

1 answer

How to know the amount of NA in each variable? Record session with javascript using cookie and a button

score 7 · Accepted Answer

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

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