Knife

<style>

body{
overflow: hidden;}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/devilsummonerexpandital.ttf);
 font-family:'titlefont';
}

@font-face{
src:url(https://dl.dropboxusercontent.com/u/4556289/DarKneS_FoNT_by_JasonBlack.ttf);
font-family:'answerfont';}

#startbutton{
 position: absolute;
 top: 0px;
 left: 10%;
 right: 0px;
 bottom: 0px;
 margin: auto;
 width: 410px;
 height: 120px;
 background: transparent;
 border: 0px solid black;
 z-index: 10;
 overflow: hidden;
 opacity: 0;
}

#startbutton audio{
 zoom: 5000%;
}

#startbutton:hover ~ #namebox *{
 color: #205159;
 -webkit-transition: all 2s;
 transition: all 2s;
 text-shadow: 0px 0px 2px black;
}

#startbutton:active ~ #transitionbox #nameslide1,
#startbutton:active ~ #transitionbox #nameslide2{
 -webkit-transition: all 0s;
 transition: all 0s;
 left: 0px;
 opacity: 0;
}

#startbutton:active ~ #transitionbox #flashrupt{
 -webkit-transition: all 0s;
 transition: all 0s;
 width: 2px;
 left: -300px;
 background: white;
 opacity: 0;
 box-shadow: 0px 0px 0px black;
}

#startbutton:active ~ #transitionbox{
 -webkit-transition: all 0s;
 transition: all 0s;
 opacity: 1;
 z-index: 2;
}

#startbutton:active ~ #namebox{
 -webkit-transition: all 0s;
 transition: all 0s;
 opacity: 0;
 z-index: 0;
}

#startbutton:active ~ #knifecontainer{
 -webkit-transition: all 0s 0s;
 transition: all 0s 0s;
 opacity: 1;
}

#startbutton:active ~ #knifecontainer #knifeimage{
 -webkit-transition: all 0s 0s;
 transition: all 0s 0s;
 opacity: 0;
}

#startbutton:active ~ #whole2{
-webkit-transition: all 0.1s 0s;
transition: all 0.1s 0s;
left: 100%;
height: 100%;
width: 100%;
}

#whole{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.imgur.com/5VMX79c.png);
 background-color: ghostwhite;
}

#whole2{
position: absolute;
top: 0px;
left: 0px;
height: 1px;
width: 1px;
z-index: 12;
-webkit-transition: all 0s .5s, height 1s 9999s, width 1s 9999s;
transition: all 0s .5s, height 1s 9999s, width 1s 9999s;}

#knifecontainer{
 opacity: 0;
 -webkit-transition: all 0s 999999s;
 transition: all 0s 999999s;
}

#knifeimage{
 position: absolute;
 top: 0px;
 left: -5%;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.imgur.com/rHbELiW.png);
 background-repeat: no-repeat;
 background-position: top left;
 background-size: auto 230%;
 opacity: 1;
 -webkit-transition: all 2s 2.1s;
 transition: all 2s 2.1s;
}

#knifesilhouette{
 position: absolute;
 top: 0px;
 left: -5%;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.imgur.com/rHbELiW.png);
 background-repeat: no-repeat;
 background-position: top left;
 background-size: auto 230%;
 opacity: 1;
 -webkit-filter:saturate(0%) grayscale(100%) blur(1px);
 opacity: .5;
}

#transitionbox,
#namebox{
 position: absolute;
 top: 0px;
 left: 10%;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 400px;
 width: 400px;
 overflow: hidden;
}

#transitionbox{
 opacity: 0;
 z-index: 0;
 -webkit-transition: all 0s 9999s;
 transition: all 0s 9999s;
}

#namebox{
 opacity: 1;
 z-index: 1;
 -webkit-transition: all 0s 9999s;
 transition: all 0s 9999s;
}

#namedef1{
 position: absolute;
 top: -40px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 42px;
 width: 400px;
 border: 0px solid black;
 font-family:'titlefont', Times New Roman;
 font-size: 80pt;
 text-align: center;
 overflow: hidden;
 box-sizing:border-box;
 color: black;
 opacity: 1;
 color: black;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#namedef2{
 position: absolute;
 top: 60px;
 left: -1px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 60px;
 width: 400px;
 border: 0px solid black;
 font-family:'titlefont', Times New Roman;
 font-size: 80pt;
 text-align: center;
 overflow: hidden;
 box-sizing:border-box;
 color: black;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#nameslide1{
 position: absolute;
 top: -40px;
 left: -10px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 42px;
 width: 400px;
 border: 0px solid black;
 font-family:'titlefont', Times New Roman;
 font-size: 80pt;
 text-align: center;
 overflow: hidden;
 box-sizing:border-box;
 color: black;
 opacity: 1;
 -webkit-transition: all 2s .3s ease-in, opacity .01s 0s linear;
 transition: all 2s .3s ease-in, opacity .01s 0s linear;
 color: black;
}

#nameslide2{
 position: absolute;
 top: 60px;
 left: 11px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 60px;
 width: 400px;
 border: 0px solid black;
 font-family:'titlefont', Times New Roman;
 font-size: 80pt;
 text-align: center;
 overflow: hidden;
 box-sizing:border-box;
 -webkit-transition: all 2s .3s ease-in, opacity .01s 0s;
 transition: all 2s .3s ease-in, opacity .01s 0s;
 opacity: 1;
 color: black;
}

#nameslide2 b,
#namedef2 b{
 position: absolute;
 left: 0px;
 right: 0px;
 margin: auto;
 font-weight: 400;
 top: -40px;
}

#namedef b{
 -webkit-transition: all 2s;
 transition: all 2s;
}

#flashrupt{
 position: absolute;
 top: 4px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 3px;
 width: 400px;
 background: black;
 box-shadow: 0px 0px 7px #205159;
 opacity: 1;
border-radius: 90px;
 -webkit-transition: all .01s, background .2s .2s, width .4s, box-shadow 1s 1s;
}

#statstuff{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 100%;
overflow: hidden;
font-family:'titlefont';
font-size: 15pt;
text-align: center;
height: 165px;
box-sizing: border-box;
padding-top: 20px;
letter-spacing: 2px;
}

#statsides{
position: absolute;
background: black;
box-shadow: 0px 0px 5px #205159;
-webkit-transition: all 2s 2s;
transition: all 2s 2s;
opacity: 1;}

#statsides.stata{
left: 0px;
top: 0px;
bottom: 0px;
width: 3px;}

#statsides.statb{
right: 0px;
top: 0px;
bottom: 0px;
width: 3px;}

#statsides.statc{
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 95%;
height: 3px;}


#leftfloat{
float: left;
font-weight: 400;
color: black;
text-shadow: 1px 1px 2px #205159;
width: 50%;
height: 20px;
text-align: left;
box-sizing: border-box;
padding-top: 5px;
-webkit-transition: all 2s 2.5s;
transition: all 2s 2.5s;
margin-bottom: 3px;}

#leftfloat:nth-child(even){
padding-left: 60px;}

#leftfloat:nth-child(odd){
text-shadow: 0px 0px 0px black;
padding-left: 20px;
padding-top: 1px;
font-family: 'answerfont', Arial;
font-size: 15pt;
font-weight: 600;
}

#startbutton:active ~ #transitionbox #statstuff #statsides,
#startbutton:active ~ #transitionbox #statstuff #leftfloat{
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
opacity: 0;
}

</style>

<div id="whole">

 <div id="startbutton">
 <audio controls src="https://puu.sh/uremM/24874643c7.mp3" loop=3 />
 </div>
 <div id="knifesilhouette">
 </div>
 <div id="knifecontainer">
 <div id="knifeimage">
 </div>
 </div>

 <div id="namebox">
 <div id="namedef1">
 kniFe
 </div>
 <div id="namedef2">
 <b>kniFe</b>
 </div>
 </div>

 <div id="transitionbox">
 <div id="nameslide1">
 kniFe
 </div>

 <div id="nameslide2">
 <b>kniFe</b>
 </div>

 <div id="flashrupt">
 </div>

<div id="statstuff">
<div id="statsides" class="stata">
</div>
<div id="statsides" class="statb">
</div>
<div id="statsides" class="statc">
</div>

<div id="leftfloat">
Alias
</div>
<div id="leftfloat">
K N I F E
</div>

<div id="leftfloat">
Sex
</div>
<div id="leftfloat">
Male
</div>

<div id="leftfloat">
Height
</div>
<div id="leftfloat">
6'7"
</div>

<div id="leftfloat">
Sexuality
</div>
<div id="leftfloat">
Pansexual / Open
</div>

<div id="leftfloat">
Affiliation
</div>
<div id="leftfloat">
Silent Knights
</div>

</div>


 </div>

<div id="whole2">
</div>

</div>