@keyframes spin {
  from {
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}
.connection-animated path {
  
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawLine 2s ease-out forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
.connection-fade-in {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.connection-fade-out {
  transition: opacity 0.3s ease;
  opacity: 0;
}

.dis-connection-animated  {
  
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  animation: vanishLine 2s ease-out forwards;
}

@keyframes vanishLine {
  to {
    stroke-dashoffset: 500;
  }
}