visibility hidden after playing animation

Issue

I'm trying to add effects on modal.

I want to make like this:

• When modal--show class added, visibility set to visible and opacity continues to grow 0% to 100%.
• When modal--show class removed, opacity continues to decrease 100% to 0%, and after then, visibility set to hidden.

Showing modal animation works well, but hiding modal animation doesn't. When hiding animation plays, visibility becomes hidden immediately when animation starts.

How to set visibility: hidden after opacity: 0% with CSS or pure JS?

JSFiddle: https://jsfiddle.net/p1gtranh/1/

document.querySelector('.open').addEventListener('click', () => {
  document.querySelector('.modal').classList.add('modal--show');
});

document.querySelector('.close').addEventListener('click', () => {
  document.querySelector('.modal').classList.remove('modal--show');
});

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0%;
}

.modal--show {
  animation: show 0.5s both;
  visibility: visible;
}

@keyframes show {
  0% {
    visibility: hidden;
    opacity: 0%;
  }
  1% {
    visibility: visible;
  }
  100% {
    opacity: 100%;
  }
}

<button class="open">open</button>

<div class="modal">
  <button class="close">close</button>
</div>

Solution

I would probably scrap the whole animation and just make a simple transition instead.

In this case, transition is specified in a shorthand. The associated properties are:

transition-timing-function: ease-in-out - how the transition should be played, this value will play an easing fading transition when both opening and closing the modal.

transition-property: all - what property is associated with the transition. Since we are transitioning both the opacity and visibility-properties, using all will select both of these.

transition-duration: 0.5s - how long the transition should last.

More on the transition-shorthand here

document.querySelector('.open').addEventListener('click', () => {
  document.querySelector('.modal').classList.add('modal--show');
});

document.querySelector('.close').addEventListener('click', () => {
  document.querySelector('.modal').classList.remove('modal--show');
});

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0%;
  transition: all 0.5s ease-in-out;
}

.modal--show {
  visibility: visible;
  opacity: 100%;
}

<button class="open">open</button>

<div class="modal">
  <button class="close">close</button>
</div>

Answered By - Sigurd Mazanti