Adding a fade-in to the exit button

HTML & CSS
13

There is an issue.

Clicking on the exit button before it fully fades in.

How would the be fixed or adjusted in the code?

What happens is:

When clicking on the exit button before it fully fades in is that it forces the svg to fade in fully, then it begins to fade out.

The svg/exit button instead should stop fading in, then from that spot, start fading out.

https://jsfiddle.net/8e13js47/

Is that something that can be adjusted or fixed in the code?

.exit {
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    visibility: visible;
    opacity: 1;
  }
}

.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 1;
}

@keyframes fadeOut {
  99% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}