Ricochet transition change

<style>

#whole{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i64.tinypic.com/2ppc809.jpg);
  background-size: auto 50%;
  background-color: #111317;
}

@font-face{
  font-family:'font1';
  src:url(https://dl.dropboxusercontent.com/u/4556289/Pixel%20Countdown.ttf);
}

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

@font-face{
  font-family:'font3';
  src:url(https://dl.dropboxusercontent.com/u/4556289/alarm%20clock.ttf);
}

#centerhost{
  position: absolute;
  height: 610px;
  width: 310px;
  border: 0px solid white;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  overflow: hidden;
  -webkit-transition: all 2s;
  transition: all 2s;
}


  .centerimage{
    position: absolute;
    left: 5px;
    top: 5px;
height: 600px;
    width: 300px;
    background: gray;
    border-radius: 160px 160px 160px 160px;
    box-shadow: 3px 3px 6px 3px black;
    border: 1px solid pink;
    overflow: hidden;
    -webkit-transition: all 2s;
    transition: all 2s;
    z-index: 5;
}

#visfilter{
position: absolute;
top: -500px;
left: -500px;
right: -500px;
bottom: -500px;
background-image:url(http://i65.tinypic.com/298z6o.jpg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity: .3;
-webkit-animation: visanim .03s infinite;
animation: visanim .03s infinite;
}

@-webkit-keyframes visanim{
0%{opacity:.6;}
100%{opacity:1;}
}

@keyframes visanim{
0%{opacity:.6;}
100%{opacity:1;}
}

#selection1:target #visfilter,
#selection2:target #visfilter,
#selection3:target #visfilter,
#selection4:target #visfilter{
-webkit-animation: none;
animation: none;
opacity: .5 !important;}

#pictureinpicture{
  position: absolute;
  top: 0px;
  left: -100px;
  right: -100px;
  bottom: -100px;
      background-image:url(http://i67.tinypic.com/11ug6td.jpg);
    background-repeat: no-repeat;
    background-size: 600px auto;
    background-position: center top;
  -webkit-transition: all 2s;
  transition: all 2s;
}

#selection1:target #centerhost,
#selection2:target #centerhost,
#selection3:target #centerhost,
#selection4:target #centerhost{
  -webkit-transition: all 2s;
  transition: all 2s;
  height: 700px;
  width: 700px;
}

#selection1:target .centerimage,
#selection2:target .centerimage,
#selection3:target .centerimage,
#selection4:target .centerimage{
  -webkit-transition: all 2s, width 2s 1s ease-in;
  transition: all 2s, width 2s 1s ease-in;
  border-radius: 0px 0px 0px 0px;
  width: 500px;
  height: 100px;
  top: 200px;
  left: 100px;
}

#selection1:target .centerimage #pictureinpicture,
#selection2:target .centerimage #pictureinpicture,
#selection3:target .centerimage #pictureinpicture,
#selection4:target .centerimage #pictureinpicture{
  left: -200px;
  top: -100px;
    -webkit-transition: all 2s, left 2s 1s ease-in;
  transition: all 2s, left 2s 1s ease-in;
}

#selectionmenu{
position: absolute;
  top: 330px;
  left: 30px;
height: 30px;
width: 650px;
text-align: center;
  border: 0px solid white;
letter-spacing: 3px;
word-spacing: 10px;
color: white;
box-sizing: border-box;
padding-top:5px;
color: pink;
  opacity: 0;
-webkit-transition: all .5s;
transition: all .5s;}

#selectionmenu a{
  height: 30px;
  letter-spacing: 2px;
  font-size: 10pt;
  font-family: 'font1', 'Times', Arial;
  background: #AE6573;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  color: black;
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: all 1s;
  transition: all 1s;
  border: 2px solid transparent;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1;
}

#selectionmenu a:hover,
#selection1:target #selectionmenu :nth-child(1),
#selection2:target #selectionmenu a:nth-child(2),
#selection3:target #selectionmenu a:nth-child(3),
#selection4:target #selectionmenu a:nth-child(4){
  background: transparent;
  color: #AE6573;
  border: 2px solid pink;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#selection1:target #selectionmenu,
#selection2:target #selectionmenu,
#selection3:target #selectionmenu,
#selection4:target #selectionmenu{
  -webkit-transition: all 1s 1.3s;
  transition: all 1s 1.3s;
  opacity: 1;
}

#contentarea,
#contentarea2,
#contentarea3,
#contentarea4{
  position: absolute;
  top: 380px;
  left: 100px;
  width: 500px;
  height: 0px;
  border: 0px solid white;
  opacity: 0;
  -webkit-transition: all .5s;
  transition: all .5s;

}

::-webkit-scrollbar {
 width: 4px;
 background-color: transparent;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: pink;
}


#selection1:target #contentarea,
#selection2:target #contentarea2,
#selection3:target #contentarea3,
#selection4:target #contentarea4{
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  opacity: 1;
  height: 150px;
}

#contentarea:before,
#contentarea2:before,
#contentarea3:before,
#contentarea4:before{
  content:'';
  position:absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #AE6573;
  opacity: .8;
  z-index: -1;
}

.contents{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: black;
  text-align: left;
  font-family: 'font2', 'Times', Arial ;
  font-size: 12pt;
  letter-spacing: 1px;
  box-sizing: border-box;
  padding: 5px;
  overflow: auto;
}


/* HEXAGON */

.hexagon {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 28.87px;
  background-color: #B07395;
  margin: 14.43px 0;
  -webkit-animation: hexanimation 6s infinite;
  animation: hexanimation 6s infinite;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 14.43px solid #B07395;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 14.43px solid #B07395;
}

@-webkit-keyframes hexanimation{
  0%{transform:rotate(0deg);
    -webkit-transform:rotate(0deg);}
  25%{transform:rotate(90deg);
    -webkit-transform:rotate(90deg);}
  50%{transform:rotate(180deg);
    -webkit-transform:rotate(180deg);}
  75%{transform:rotate(270deg);
    -webkit-transform:rotate(270deg);}
  100%{transform:rotate(360deg);
    -webkit-transform:rotate(360deg);}
}

@keyframes hexanimation{
  0%{transform:rotate(0deg);
    -webkit-transform:rotate(0deg);}
  25%{transform:rotate(90deg);
    -webkit-transform:rotate(90deg);}
  50%{transform:rotate(180deg);
    -webkit-transform:rotate(180deg);}
  75%{transform:rotate(270deg);
    -webkit-transform:rotate(270deg);}
  100%{transform:rotate(360deg);
    -webkit-transform:rotate(360deg);}
}

#audiohold{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2;
  height: 70px;
  width: 70px;
  border: 0px solid white;
  overflow: hidden;
}
#audiohold *{
  position: relative;
  zoom:320%;
  opacity: 0;
  left: -5px;
  top: -4px;
}

#audiodrop{
  position: fixed;
  height: 25px;
  width: 0px;
  background: transparent;
  top: 85px;
  right: 10px;
  -webkit-transition: all 1s;
  transition: all 1s;
  overflow: hidden;
  opacity: 0;
  color: #AE6573;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  font-family: 'font3', 'Times', Arial;
  text-align: center;
  font-size: 10pt;
}

#audiodrop b{
  position: absolute;
  width: 200px;
  left: 0px;
  top: 10px;
}

#audiohold:hover ~ #audiodrop{
  opacity: 1;
  width: 200px;
  border-color: pink;
}

#titlediv{
  position: absolute;
    top: 161px;
    height: 51px;
    width: 500px;
    left: 130px;
  font-family: 'font3', 'Times', Arial;
  border: 0px solid white;
  z-index: 6;
  color: pink;
  text-align: right;
  text-shadow: 2px 2px 4px black;
  font-size: 30pt;
  z-index: 0;
  opacity: 0;
  -webkit-transition: all 1s .2s, opacity .3s;
  -webkit-transition: all 1s .2s, opacity .3s;
  text-transform: uppercase;
}

#selection1:target #titlediv,
#selection2:target #titlediv,
#selection3:target #titlediv,
#selection4:target #titlediv{
  -webkit-transition: all 1s 1s, opacity 1s 1.5s;
  transition: all 1s 1s, opacity 1s 1.5s;
  opacity: 1;
  z-index: 6;
}

@-webkit-keyframes letvanish{
  0%{
    opacity:0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity:0;
  }
}

@keyframes letvanish{
  0%{
    opacity:0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity:0;
  }
}

#titlediv a{
  -webkit-animation: letvanish 2s infinite;
  animation: letvanish 2s infinite;
  text-decoration: none;
  color: white;
}

/* HEXAGON -- END */

#centerhost{
-webkit-filter:grayscale(80%);
 filter:grayscale(80%);
  right: 400px;
}

#introdiv{
  position: absolute;
  left: 250px;
  top: 40px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  height: 400px;
  width: 300px;
  border: 0px solid white;
  text-align: left;
  box-sizing: border-box;
  color: pink;
  font-family:'font3', 'Times', Arial;
  font-size: 15pt;
  text-transform: uppercase;
  line-height: 30px;
  -webkit-transition: all 1s 2s;
  transition: all 1s 2s;
}

#introdiv a{
  font-weight: 600;
  color: pink;
  text-decoration: none;
}

#whole:hover #introdiv a{
  -webkit-animation: letvanish 1s infinite;
  animation: letvanish 1s infinite;
}

#introdiv a:hover{
  text-decoration: underline;
}

#selection1:target #introdiv,
#selection2:target #introdiv,
#selection3:target #introdiv,
#selection4:target #introdiv{
 -webkit-transition: all .5s;
  transition: all .5s;
  opacity: 0;
}

#selection1:target #centerhost,
#selection2:target #centerhost,
#selection3:target #centerhost,
#selection4:target #centerhost{
  -webkit-filter:grayscale(0%);
  filter:grayscale(0%);
  right: 0px;
  z-index: 2;
}

.contents a{
  font-weight:600;
  text-decoration: none;
  color: black;
  -webkit-animation: letvanish 1s infinite;
  animation: letvanish 1s infinite;
}

.contents a:hover{
  text-decoration: underline;
}

</style>

<div id="whole">

  <div id="selection1">
    <div id="selection2">
      <div id="selection3">
        <div id="selection4">
          <div id="centerhost">

            <div id="titlediv">
              Character Name Here<a href=#none>_</a>
            </div>

            <div class="centerimage">
              <div id="pictureinpicture">
<div id="visfilter">
</div>
              </div>
            </div>
            <div id="selectionmenu">
              |
              <a href="#selection1">link 1</a> |
              <a href="#selection2">link 2</a> |
              <a href="#selection3">link 3</a> |
              <a href="#selection4">ooc</a> |
            </div>

            <div id="contentarea">
              <div class="contents">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </div>
            </div>

            <div id="contentarea2">
              <div class="contents">2. Words and words.
              </div>
            </div>

            <div id="contentarea3">
              <div class="contents">
                3. Words and words.
              </div>
            </div>

            <div id="contentarea4">
              <div class="contents">Code by <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>Digital</a>
              </div>
            </div>

          </div>


<div id="introdiv">
  . . .<br><br>

  Accessing . . .<br><br>
  . . .<br><br>
  TARGET: XXXXX _<br><br>
  . . .<br><br>
  PLEASE <a href="#selection1">CLICK</a> TO CONFIRM _
        </div>


        <div class="hexagon">
        </div>
        <div id="audiohold">
          <audio controls src="https://www.dropbox.com/s/s3kbnokw4zt33oq/102%20-%20AIM%20TO%20WIN%20%28Character%20Select%29.mp3?dl=1" loop=3>
          </audio>
        </div>

        <div id="audiodrop">
          <b> AIM TO WIN - TEKKEN TAG 2</b>
        </div>

      </div>
    </div>
  </div>
</div>