CSS Pulse Effect

CSS-only animated pulse effect using box-shadow.

by the_voder

HTML

<!-- 
Pulse effect using animated box-shadow

Works well for "hotspots" on interactive map.
-->

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

CSS

body {
  background-color: #333;
}

.spot {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  left: 20%;
  top: 10%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

/*
pulse animation using box-shadow:
https://reactgo.com/css-pulse-animation/
*/

.pulse {
  box-shadow: 0 0 0 0 #000;
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.75);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
  }
}