.cursor{
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  animation: cursorAnim 0.5s infinite alternate;
pointer-events:none;
}

.cursor::after{
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  border: 8px solid gray;
  opacity: 0.5;
  top:-14px;
  left:-14px;
  animation: cursorAnim2 0.5s infinite alternate;
}

@keyframes  cursorAnim{
  from{
      transform: scale(1);
  }
  to{
      transform: scale(0.7);
  }
}

@keyframes  cursorAnim2{
  from{
      transform: scale(1);
  }
  to{
      transform: scale(0.4);
  }
}

@keyframes  cursorAnim3{
  0%{
      transform: scale(1);
  }
  50%{
      transform: scale(3);
  }
  100%{
      transform: scale(1);
      opacity: 0;
  }
}

.expand{
  animation: cursorAnim3 0.5s forwards;
  border: 1px solid #db133a;
}