CSS display none and opacity animation with keyframes not working

Question

I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.

Answer 1

Just use position: fixed and drop the z-index: -5 at the end of the @keyframe animation (you can do any negative index....

CSS:

@keyframes fadeOut {
  0% { opacity: 1

  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100%{
    opacity: 0;
    display:none;
    position: fixed;
    z-index: -5;
  }
}

Answer 2

It's been tricky, it's been nasty, but here it is...

• FadeOut (opacity) first
• then truly hide (meaning: not covering up or catching any clicks, getting height: 0,...)
  • display: <whatever> is indeed no option.
  • But animating scaleY is. Or translate to far-far-away or the old classic: animating max-height (from a specific high px value) down to 0px…

For an earlier version of this snippet with some more general info on „back and forth animation on class toggle“ (and preventing that animation upon initial page load look here.

const div = document.querySelector('.target')

function toggleTarget() {
  div.classList.add('active');
  div.classList.toggle('play');
}

/* REF https://stackoverflow.com/a/49575979 */
/* REF https://stackoverflow.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working/64857102#64857102 */
body, html { /* eye candy */
  background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
}
button { font-size: 4em; border-radius: 20px; margin-left: 60px;}

div { /* eye candy */
  width: 200px; height: 100px; border-radius: 20px;
  background: green; display: flex; align-items: center; justify-content: center;
  font-family: sans-serif; font-size: 2em; color: white; text-align: center;
  text-shadow: 0px 2px 4px rgba(0,0,0,.6);
  
}

/* using this extra .active class prevents that there is an animation already on loading */
.active {
  animation: fadeAndHideBack 1s linear forwards;
}

.play {  
  opacity: 0;
  /* learning curve: setting background "awaits" animation finish,
     setting scale prematurely jumps to it, then doing animation from there */

  animation: fadeAndHide 1s linear forwards;
}


@keyframes fadeAndHide {
  0% { opacity: 1; }
  99.9% { opacity: 0; max-height: 100px; }
  100% { opacity: 0; max-height: 0; }
}

@keyframes fadeAndHideBack {
  0% { opacity: 0; max-height: 0; }
  0.1% { opacity: 0; max-height: 100px; }
  100% { opacity: 1; }
}

<div class="target"></div>
<button onclick="toggleTarget()">
  Toggle
</button>