Pulse animation

can be used on the ::before of another visible element

by katalin_2003

HTML

<div class="pulse"></div>

CSS

/*
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: uv-pulse;
*/

@-webkit-keyframes uv-pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0
  }

  50% {
    -webkit-transform: scale(.1);
    opacity: .7
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 0
  }
}


.pulse {
  content: "";
  /* position: relative; */
  display: inline-block;
  border-radius: 50%;
  /* top: -4px; */
  /* right: -70px; */
  border: 6px solid #0000ff;
  background: 0 0;
  height: 25px;
  width: 25px;
  /* -webkit-animation: uv-pulse 2s ease-out; */
  /* -moz-animation: uv-pulse 2s ease-out; */
  animation: uv-pulse 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0;
  /* margin-left: -20px; */
}