Arcanine

<style>
body{
  background-color:transparent;
  overflow:hidden;
}
#gradient{
    background: linear-gradient(red, yellow); /* Standard syntax */
background-size:100%;
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  opacity:0.6;
  animation:flame 5s linear infinite;

}


@keyframes flame {
0% { -webkit-filter: brightness(100%);
}
20% {-webkit-filter: brightness(150%);
}
25% {-webkit-filter: brightness(200%);
}
35% {-webkit-filter: brightness(150%);
}
40% {-webkit-filter: brightness(100%);
}
45% {-webkit-filter: brightness(130%);
}
55% {-webkit-filter: brightness(100%);
}
60% {-webkit-filter: brightness(150%);
}
65% {-webkit-filter: brightness(200%);
}
75% {-webkit-filter: brightness(80%);
}
85% {-webkit-filter: brightness(160%);
}
90% {-webkit-filter: brightness(150%);
}
100% {-webkit-filter: brightness(100%);
}
}


#background-body{
  background-image:url(http://forum.gc.historygames.net/uploads/monthly_2016_09/background1-011.png.14b46c1e826acd884a125ad82e183b16.png);
  background-size:10%;
  background-position:left;
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  opacity:0.7;
  z-index:2;
}

#menu {
  border:solid 6px #000;
  background-image:url(http://i.imgur.com/7na1fIN.png);
  backround-color:transparent;
  background-size:100%;
  width:800px;
 height:350px;
 border-radius: 70px 20px 70px 20px;
  top:50%;
  left:50%;
  position:absolute;
  margin-top:-190px;
  margin-left:-400px;
  z-index:5;

}

#whosthat{
  background-image:url(http://i.imgur.com/HddtBOT.png);
  background-size:100%;
  background-repeat:no-repeat;
  width:800px;
 height:350px;
  position:absolute;
  border-radius: 65px 15px 65px 15px;
  background-position:0px -80px;
  z-index:50;
  transition:1s;
  opacity:0;
}

#whosthat:target{
  animation: turn-off 0.55s linear ;
  opacity:0;
  z-index:0;
}

@keyframes turn-off{
  0%{
    transform:scale(1,1.3) translate3d(0,0,0);
    -webkit-filter:brightness(1);
    filter:brightness(1);
    opacity:1;
  }
  60%{
    transform:scale(1.3,0.001) translate3d(0,0,0);
    -webkit-filter:brightness(10);
    filter:brightness(10);
  }
  100%{
    transform:scale(0.000,0.0001) translate3d(0,0,0);
    -webkit-filter:brightness(50);
    filter:brightness(50);
  }
}

#arcanine{
  width:400px;
  height:400px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-150px;
  margin-left:-300px;
  animation: float 6s ease-in-out infinite;
  z-index:1;
}

#arcanine a{
  background-image:url(http://i.imgur.com/HDhAKmy.png);
  background-size:100%;
  width:300px;
  height:300px;
  display:inline-block;
  z-index:0;
}

@keyframes float {
	0% {

		transform: translatey(0px);
	}
	50% {

		transform: translatey(-10px);
	}
	100% {

		transform: translatey(0px);
	}
}

#ball1{

  background-image:url(https://68.media.tumblr.com/84c06021db3bfcffb6e2400e632da1bf/tumblr_odm3weRRwA1qfjr5zo2_540.gif);
 background-size:190%;
  background-position:-50px;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:-230px;
  margin-left:400px;
  position:absolute;
  opacity:1;
  border:solid 6px #000;
  border-radius:100%;
 z-index:10;
  opacity:0;
  transition:1s;
  transition-delay:1s;
}

#whosthat:target + #ball1{
  opacity:1;
  margin-left:350px;
}

#ball2{

  background-image:url(https://68.media.tumblr.com/1e762cfbd78fd456546b8601daa08f0d/tumblr_oqxusuHpcY1vpbs3jo1_500.gif);
 background-size:190%;
  background-position:-50px;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:-230px;
    margin-left:-515px;
  position:absolute;
  opacity:1;
  border:solid 6px #000;
  border-radius:100%;
 z-index:10;
  opacity:0;
  transition:1s;
  transition-delay:1s;
}

#whosthat:target ~ #ball2{
  opacity:1;
  margin-left:-465px;
}

#ball3{

  background-image:url(https://68.media.tumblr.com/4a17b6459b95791c96a8a8e50e479e08/tumblr_omfw0pqGdC1tx6wtwo3_500.gif);
 background-size:190%;
  background-position:-50px;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:110px;
  margin-left:400px;
  position:absolute;
  opacity:1;
  border:solid 6px #000;
  border-radius:100%;
 z-index:10;
  opacity:0;
  transition:1s;
  transition-delay:1s;
}

#whosthat:target ~ #ball3{
  opacity:1;
  margin-left:350px;
}

#ball4{

  background-image:url(https://68.media.tumblr.com/2b640258ebb34e1290e10d5f57151232/tumblr_o3mk15wgcF1tqptlzo1_500.gif);
 background-size:190%;
  background-position:-50px 0px;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:110px;
  margin-left:-515px;
  position:absolute;
  opacity:0;
  border:solid 6px #000;
  border-radius:100%;
 z-index:10;
  opacity:0;
  transition:1s;
  transition-delay:1s;
}

#whosthat:target ~ #ball4{
  opacity:1;
  margin-left:-465px;
}

#image{
  background-image:url(http://i.imgur.com/jBzZh8a.png);
  background-size:40%;
  width:570px;
  height:500px;
  background-repeat:no-repeat;
  top:50%;
  left:50%;
  position:absolute;
  margin-top:-175px;
  margin-left:-950px;
  transform: scaleX(-1);
        filter: FlipH;
  opacity:0;
  z-index:10;
  transition:1s;
  transition-delay:1.5s;
}

#whosthat:target ~ #image{
  opacity:1;
  margin-left:-800px;
}

#image2{
  background-image:url(http://i.imgur.com/2N1swat.png);
  background-size:40%;
  width:630px;
  height:500px;
  background-repeat:no-repeat;
  top:50%;
  left:50%;
  position:absolute;
  margin-top:-175px;
  margin-left:380px;
  opacity:0;
  z-index:10;
  transition:1s;
  transition-delay:1.5s;
}

#whosthat:target ~ #image2{
  opacity:1;
  margin-left:200px;
}

#sprite{
  background-image:url(http://rs980.pbsrc.com/albums/ae290/CorrineAri/arcanine.gif~c200);
  width:130px;
  height:130px;
  position:absolute;
  top:50%;
  left:50%;
  background-size:100%;
  margin-top:-120px;
  margin-left:-225px;
}

#one{
  width:480px;
  height:300px;
  position:absolute;
  top:50%;
  left:50%;
  background-image:url(http://i.imgur.com/SmHO87p.png);
  background-repeat:no-repeat;
  background-size:100%;
  margin-top:-150px;
  margin-left:-235px;
  z-index:0;
  opacity:1;
}

#one:target {
  opacity:1;

}

#one:target #whosthat:target {
  opacity:0;
  z-index:0;

}

#navi{
  width:250px;
  height:30px;
  background-color:#fff;
  z-index:13;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:140px;
  margin-left:-125px;
  float:left;
}

#navi a{
  width:50px;
  height:30px;
  background-color:#b76e6e;
  display:inline-block;


}

#navi + #whosthat:target {
  opacity:0;
  z-index:0;
}

</style>

<div id="gradient"></div>
<div id="background-body"></div>
<div id="menu">
  <div id="navi"><a href="#one"></a><a href=""></a><a href=""></a></div>
  <div id="whosthat"><div id="arcanine"><a href="#whosthat"></a></div></div>

  <div id="ball1"></div>
  <div id="ball2"></div>
  <div id="ball3"></div>
  <div id="ball4"></div>
  <div id="image"></div>
  <div id="image2"></div>
  <div id="one"> <div id="sprite"></div></div>
</div>