This is my code, and I want to change the background animation to other type ex: fadein, fadeout etc. of animation, how to do that?

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vensta | Property Development</title>

<style>
html,body {
    margin:0;
    height:100%;
	background-color:#F69220;
	font-family:Arial, "Gill Sans", Helvetica, "Myriad Pro";
	font-size: 100%;
 }
#box0,#box1,#box2,#box3 {
    position:relative;
    z-index:0;
    float:left;

    width:100%;
    height:100%;
    margin:-100% 1% 0 1%;

    background-image:url(images/property_bg.png);
    background-size:100% 100%;	
    box-shadow:0px 0px 0px rgba(0,0,0,1.0),
          inset 0px  0px  0px rgba(0,0,0,1.0);

    -webkit-transform:skew(-5deg);
    -moz-transform:skew(-45deg);
    -ms-transform:skew(-5deg);
    -o-transform:skew(-5deg);
    transform:skew(-5deg);

    animation-delay:0s;
    animation-duration:1s;
    animation-name:slideDown;
    animation-fill-mode:forwards;

    -webkit-animation-delay:0s;
    -webkit-animation-duration:1s;
    -webkit-animation-name:slideDown;
    -webkit-animation-fill-mode:forwards;
 }

#nav {
    position:absolute;
    z-index:3;

    width:100%;
    padding:0;
    margin:0;
    border-top:0px solid rgb(0,0,0);
    border-bottom:0px solid rgb(0,0,0);
    bottom:13%;

    list-style-type:none;
    text-align:center;
    background-color:#ffffff;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
         inset 0 0 0px rgba(0,0,0,0.8);
    opacity:0;

    animation-delay:2.0s;
    animation-duration:1.0s;
    animation-name:show;
    animation-fill-mode:forwards;

    -webkit-animation-delay:2.0s;
    -webkit-animation-duration:1.5s;
    -webkit-animation-name:show;
    -webkit-animation-fill-mode:forwards;
 }
#nav li { 
    display:inline;
    margin:0 20px;
 }
#nav a {
    color:rgb(0,0,0); 
    text-transform:uppercase;
    text-decoration:none;
	color:#E34927;
	font-weight:bold;
	font-size:14px;
 }
 
#nav li.navlogo img{
	padding-bottom: 0px;
	vertical-align:middle;
 } 
 
#prop_title {
	z-index:1;
	position:absolute;
	bottom: 80%;
	left: 20%;
	opacity:0;

    animation-delay:1.5s;
    animation-duration:1.0s;
    animation-name:show;
    animation-fill-mode:forwards;

    -webkit-animation-delay:1.5s;
    -webkit-animation-duration:1.0s;
    -webkit-animation-name:show;
    -webkit-animation-fill-mode:forwards;
}

#about_text {
	z-index:2;
	position:absolute;
	top:24%;
	left:20%;
	text-align:justify;
	word-wrap:break-word;
	width: 60%;
	line-height: 24px;
	font-family:Helvetica;
	font-size: 95%;
	opacity:0;

    animation-delay:1.5s;
    animation-duration:1.0s;
    animation-name:show;
    animation-fill-mode:forwards;

    -webkit-animation-delay:1.5s;
    -webkit-animation-duration:1.0s;
    -webkit-animation-name:show;
    -webkit-animation-fill-mode:forwards;
}

.table {
	z-index:3;
	position: absolute;
	top: 45%;
	left: 24%;
	opacity: 0;
	
	animation-delay:1.5s;
    animation-duration:1.0s;
    animation-name:show;
    animation-fill-mode:forwards;

    -webkit-animation-delay:1.5s;
    -webkit-animation-duration:1.0s;
    -webkit-animation-name:show;
    -webkit-animation-fill-mode:forwards;
}

@keyframes slideDown{
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }
@-webkit-keyframes slideDown {
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }

@keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
@-webkit-keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
 
</style>

</head>
<body>

<div id="box0"></div>

<ul id="nav">
 <li class="navlogo"><a href="index.html"><img src="images/logo.png"></a></li>
 <li><a href="about.html">ABOUT VENSTA</a></li>
 <li><a href="property_development.html">PROPERTY DEVELOPMENT</a></li>
 <li><a href="contact.html">CONTACT US</a></li>
</ul>

<div id="prop_title">
<img src="images/property_dev_title.png">
</div>

<div id="about_text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla et eros eget odio cursus luctus. Quisque vel justo. Nam nec tellus. Maecenas malesuada lacus feugiat augue. Maecenas dui ipsum, accumsan in, dictum in, feugiat vitae, lorem. Aenean mollis dui non metus. Nam erat nunc, dictum vel, dapibus et, tincidunt id, elit. Nulla lorem. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent lorem. Suspendisse tempor. Aliquam sit amet sem. Cras scelerisque justo in dui. In quis libero. Fusce cursus suscipit arcu. </p>
</div>

<div class="table">
<table width="" border="0">
  <tr>
    <td valign="bottom" align="right"><img src="images/complete_dev_img.png"></td>
    <td valign="bottom" align="left"><div id="t1"><a href="completed.html">COMPLETED<br />DEVELOPMENT &#62;</a></div></td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td valign="bottom" align="right"><img src="images/ongoing_dev_img.png"></td>
    <td valign="bottom" align="left"><div id="t2"><a href="ongoing.html">ON GOING<br />DEVELOPMENT &#62;</a></div></td>
  </tr>
</table>
</div><!--table-->
</body>
</html>
*i highlight the code