nym/nym-connect/src/components/PowerButton/power-button.css

#ring-expand {
  animation-name: rings-expand;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-play-state: paused;
}

#ring-one.expand {
  opacity: 0.3;
  transition: opacity 0.1s ease-in-out;
}

#ring-two.expand {
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
}

#ring-three.expand {
  opacity: 0.1;
  transition: opacity 0.3s ease-in-out;
}

#ring-four.expand {
  opacity: 0.05;
  transition: opacity 0.4s ease-in-out;
}

#ring-one.contract {
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}

#ring-two.contract {
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.1s;
}

#ring-three.contract {
  opacity: 0;
  transition: opacity 0.1s;
  transition-delay: 0.1s;
}

#ring-four.contract {
  opacity: 0;
  transition: opacity 0.1s;
  transition-delay: 0.1s;
}

circle,
path {
  transition: stroke 0.5s, fill 0.5s;
}

.pulse {
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes pulse {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.3;
  }
}