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;
  }
}