push an element down or up

HTML

<div id="container">

    <div id="element">You wanted to hide me with an animation...</div>
    <div class="below">I am below u</div>

</div>

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}


.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

.push-up {
    -webkit-animation: pushUp 2s forwards linear;
}



/* just some basic styles for the page */

#element {
  display: block;
  width: 20em;
  height: 10em;
  padding-left: 2em;
  padding-right: 2em;
  background: purple;
  color: #fff;
  opacity: 1;
}

.below {
  width: 20em;
  height: 10em;
  background: yellow;
  padding-left: 2em;
  padding-right: 2em;
  color: #fff;
}

JavaScript

function fadeElement() {

    var element = document.getElementById("element");

    // shrink item
    ///element.className = element.className + " push-down";

    // increase height
    element.className = element.className + " push-up";

}


setTimeout(function () {
  fadeElement();  
}, 1000);