Css efects slide in and out - html

Question

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;}
}

Answer 1

No way to do this just with CSS and HTML. However it is possible to do with JavaScript. With JavaScript you can detect when the animation has ended using an Event Listener. Then you can remove or hide the div you want.
var div = document.getElementById("div1");
//add the event listener
div.addEventListener("animationend", function(event){
document.getElementById("div2").style.display = "none";
});
//you will need to explicitly add the class that contains the animation
div.classList.addClass("animate");
Change your CSS to be declared on the class .animate instead of on #div1. Also, be aware of browser prefixes. For more detail refer to this link.