Pulse Animation

<div class="pulse-container">
  <div class="pulse-circle"></div>
</div>

.pulse-container {
  position: relative;
  width: 80px;
  height: 80px;
}
.pulse-circle {
  width: 80px;
  height: 80px;
  background: #e74c3c;
  border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite;
}
.pulse-circle::before,
.pulse-circle::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #e74c3c;
  top: 0;
  left: 0;
  animation: pulse-ring 2s infinite;
}
.pulse-circle::after {
  animation-delay: 1s;
}
@keyframes pulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1); }
  100% { transform: scale(0.8); }
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}