Css efects slide in and out

I'm trying to create a slide up/down or right/left animation, but I couldn't get it to work. How to hide the first div after some time with a sliding effect? how to play with display in animation

some help will be apreciated, this what I'm doing

<div id="div1">Fist div</div> 
<div id="div2">Second div </div>


#div1{

 animation: slideup 7s;
    -moz-animation: slideup 7s;
    -webkit-animation: slideup 7s;
    -o-animation: slideup 7s;
}

#div2
{
    position:relative;
}

@keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}

@-moz-keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}

@-webkit-keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}

@-o-keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}