Fork - CSS Pulsating Circle

UX for showing people where to reference something.

by Dhanck

HTML

<div class="hoverAnimation"></div>

CSS

.hoverAnimation {
  border: 3px solid #999;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.0
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}