Dot waving Animation

Dot waving animation, we are going to create a circle with sonar effect using css.

The concept is quite simple. To create a circle with sonar effect . we defined two classes called (.dot ) and (.wave). The class (.wave) is the child of class (.dot).

Position : absolute is applied to both parent class and child class.

First we are going to create a circle by using

HTML

<div style="max-width:500px;margin:auto;margin-top:10vw;">
			<h1 style="display:inline-block;">This is a Heading</h1>
			<div style="position:relative;display:inline-block;vertical-align:top;">
			  <div class="dot"></div>
			  <div class="wave"></div>
			</div>
        </div>

CSS

.wave {
  width: 10px;
  height: 10px;
  border: 5px solid #1abc9b;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #37964b;
  z-index: 10;
  position: absolute;
}

.dot {
  border: 10px solid #1abc9b;
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: wave 3s ease-out;
  -moz-animation: wave 3s ease-out;
  animation: wave 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index:1;
  opacity:0;
}

Now we are creating anther circle. The shape, size, displaying position, and color are the same as the first circle. Note that we set z-index to 1 to make sure it lies underneath its parent.

we wanted it to go from 0% semi-transparent to completely transparent while spreading to the scale of 1 time. So here is how we designed the animation keyframe:

css keyframes

@-moz-keyframes wave {
 0% {
    -moz-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -moz-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

This Keyframe is applied to second circle called wave class

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *