Hide / remove space taken by div from html with css only after animation

Question

I'm trying to "physically" remove, or have the div (for example) not take up space on the screen after hidden.

I added another div below the #test div to show that after #test is hidden, it still takes up space on the screen. Is there a way to have that space be gone, with css only?

#test {
  opacity: 0;
  -webkit-animation: fadeinout 3s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeinout 3s;
  /* Firefox < 16 */
  -ms-animation: fadeinout 3s;
  /* Internet Explorer */
  -o-animation: fadeinout 3s;
  /* Opera < 12.1 */
  animation: fadeinout 3s;
}

@keyframes fadeinout {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-moz-keyframes fadeinout {
  /* Firefox */
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes fadeinout {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-o-keyframes fadeinout {
  /* Opera */
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div id="test">hide me after 3 seconds</div>
<div>After 3 seconds I don't move up.</div>

Answer 1

You could also animate the max-height - just make sure that the middle max-height is taller than your tallest fading div

#test {
  opacity: 0;
  -webkit-animation: fadeinout 3s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeinout 3s;
  /* Firefox < 16 */
  -ms-animation: fadeinout 3s;
  /* Internet Explorer */
  -o-animation: fadeinout 3s;
  /* Opera < 12.1 */
  animation: fadeinout 3s;
    max-height: 0;
}

@keyframes fadeinout {
  from {
    max-height: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
    max-height: 5em;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}

<div id="test">hide me after 3 seconds</div>
<div>After 3 seconds I don't move up.</div>