CSS Keyframe Animation fade out and hide without display:none

The Display property is not working well with CSS animations, if you read this, you already know. So we have to find a way around.

In my case, i have a layer above the entire page which is overlaying the page content. As you already tried out, visibility won´t work also, as it´s the same as opacity:0;

Solutions:

1. You can move the entire layer out of the viewport eg. position:absolute; left:-9000px;
2. You can try out using a negative z-index to get the layer behind the page-content (makes only sense for layers which are absolute / fixed positioned over the page, not in normal element flow).
3. Make overflow:hidden; and height:0; – take a look:

@keyframes fadeOutAndHide {
    0% {
      opacity:1.0;
    }
    99%{
      opacity:0;
      height:100%;
    }
    100% {
      height:0;
    }
}
.page-welcome-layer.hidden{
  animation:fadeOutAndHide ease-in 1.5s;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  overflow:hidden;
}