First Layer

/* STYLE FIRST LAYER */

body {background: white;}

a {color: black;}

#bigbody {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:
  url(http://i61.tinypic.com/vsjdvm.jpg);
}

#container{
  height: 300px;
  width: 300px;
  position: absolute;
  border: 0px solid red;
  overflow:hidden;
  top: 20%;
  left: 38%;
  }

#vanishing{
height: 30px;
width: 10px;
border: 0px solid black;
position: absolute;
top: 145px;
left: 110px;
-webkit-animation: xvanish 180s;
opacity: 0;
z-index: 1;
}

@-webkit-keyframes xvanish{
  0% {opacity: 0;}
  .5% {opacity: 1; }
  100 {opacity 1; }
  opacity: 1;
}

#vanishing.second {
  left: 120px;
  -webkit-animation-delay: .5s;}

#vanishing.third {
  left: 130px;
  -webkit-animation-delay: 1s;}

#vanishing.fourth {
  left: 140px;
  -webkit-animation-delay: 1.5s;}

#vanishing.fifth {
  left: 150px;
  -webkit-animation-delay: 2s;}

#vanishing.sixth {
  left: 160px;
  -webkit-animation-delay: 2.5s;}

#vanishing.seventh {
  left: 170px;
  -webkit-animation-delay: 3s;}

#vanishing.eigth {
  left: 180px;
  -webkit-animation-delay: 3.5s;}

#entertexthere{
  height: 160px;
  width: 200px;
  border: 1px solid black;
  position: absolute;
  top: 70px;
  left: 50px;
  z-index: 0;
  background: grey;
  opacity: .5;}

#usernamediv{
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid black;
  height: 25px;
  width: 80px;
  padding-left: 20px;
  background: white;
  }

#passworddiv
{ position: absolute;
height: 25px;
width: 100px;
border: 1px solid black;
top: 140px;
left: 100px;
background: white;
}

#presslogin
{ position: absolute;
height: 20px;
width: 80px;
top: 180px;
left: 110px;
z-index: 1;
border: 1px solid black;
text-align: center;
background: tan;
-webkit-animation: tothefront 180s;
}

#aroundlogin
{position: absolute;
height: 22px;
width: 84px;
border: 1px solid black;
top: 178px;
left: 108px;
text-align: center;
padding-top: 2px;
z-index: 2;
color: grey;}

@-webkit-keyframes tothefront{
  0% {z-index: 1;}
  12% {z-index: 3;}
  100% {z-index: 3;}
}

/* FIRST LAYER START */

<div id="bigbody">
<div id="container">
<div id="vanishing">*
</div>
<div id="vanishing" class="second">*
</div>
<div id="vanishing" class="third">*
</div>
<div id="vanishing" class="fourth">*
</div>
<div id="vanishing" class="fifth">*
</div>
<div id="vanishing" class="sixth">*
</div>
<div id="vanishing" class="seventh">*
</div>
<div id="vanishing" class="eigth">*
</div>
<div id="entertexthere">
</div>
<div id="usernamediv">admin
</div>
<div id="passworddiv">
</div>
<div id="aroundlogin">login
</div>
<a href="blahblahblah"><div id="presslogin">login
</div></a>

</div>
</div>