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;


  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% {
    100% {
  animation:fadeOutAndHide ease-in 1.5s;
  animation-iteration-count: 1;

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Der Zeitraum für die reCAPTCHA-Überprüfung ist abgelaufen. Bitte laden Sie die Seite neu.