Breathing Animation

<div class="breathing-animation"></div>

.breathing-animation {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  position: relative;
  animation: breathing 4s ease-in-out infinite;
}
.breathing-animation::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  opacity: 0.3;
  animation: breathing-glow 4s ease-in-out infinite;
  z-index: -1;
}
.breathing-animation::after {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  opacity: 0.1;
  animation: breathing-glow 4s ease-in-out infinite 0.5s;
  z-index: -2;
}
@keyframes breathing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes breathing-glow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.1; }
}