SOURCE

<div class="container">
  <div class="dot"></div>
</div>

.container{
  position:relative;
}
.dot{
  width:20px;
  height:20px;
  background-color:#188eee;
  position:absolute;
  border-radius:50%;
  border:5px solid #ccc;
  top:100px;
  left:100px;
}
.dot:hover{
  /* border:none; */
  /* border-color:green; */
  border:0 solid #ccc;
  left:105px;
  top: 105px;
  animation-name:shadow;
  animation-direction:alternate;
  animation-delay:0.5s;
  animation-duration:1s;
  animation-iteration-count:6;
}
@keyframes shadow{
  from{
    box-shadow:0 0 1px red;
  }
  to{
    box-shadow:0 0 20px red;
  }
}