for the love of my life squish

<style>
#text{
 width:730px;
 padding:10px;
 color:#fff;
 font-family: "Vollkorn SC";
 font-weight:900;
 font-size:14pt;
 position:absolute;
 z-index:9;
 bottom:18%;
 right:0%;
 transition-delay:9999999s;
}

 body:hover #text{
  opacity:0;
  transition:1s;
  transition-delay:7s;
}

p{
 width: 0px;
 animation: type 2s 6s steps(60, end);
 overflow:hidden;
 white-space: nowrap;
 margin: 0px 0 0 0px;
 z-index:9;
 animation-fill-mode: forwards;

}

p:nth-child(2){
 animation: type2 3s 1s steps(60, end);
 animation-fill-mode: forwards;

}

p:nth-child(3){
 animation: type3 4.5s 2s steps(60, end), blink-caret .75s step-end infinite;
 animation-fill-mode: forwards;
 border-right: .15em solid #eee;
}

p:nth-child(4){
 animation: type3 5.5s 3s steps(60, end);
 animation-fill-mode: forwards;

}

 @keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color:#fffee7; }
}



@keyframes type{
 from { width: 0; }
}

@keyframes type2{
 0%{width: 0; }
 40%{width: 0; }
 100%{ width: 100%; }
}

@keyframes type3{
 0%{width: 0; }
 68%{width: 0; }
 100%{ width: 45%; }
}
@keyframes type4{
 0%{width: 0; }
 75%{width: 0; }
 100%{ width: 100%; }
}

#crossfade > img {
    width: 100%;
    height: 100%;
    position:cover;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 1;
    z-index: 9;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s forwards  0s;
    -moz-animation: imageAnimation 30s forwards  0s;
    -o-animation: imageAnimation 30s forwards  0s;
    -ms-animation: imageAnimation 30s forwards  0s;
    animation: imageAnimation 30s forwards  0s;

}
#crossfade > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s forwards 0s;
    -moz-animation: imageAnimation 30s forwards 0s;
    -o-animation: imageAnimation 30s forwards  0s;
    -ms-animation: imageAnimation 30s forwards  0s;
    animation: imageAnimation 30s forwards  0s;


}

#crossfade > img:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
 animation-fill-mode:forwards;

}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
 animation-fill-mode:forwards;

}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
 animation-fill-mode:forwards;

}
#crossfade > img:nth-child(5) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
 animation-fill-mode:forwards;

}

@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
 </style>
<div id="crossfade">
  <img src="http://d9hhrg4mnvzow.cloudfront.net/www.oneshot-game.com/23338732-screen8-small.png">
  <img src="http://press.degigames.com/oneshot/images/Red.png" >
  <img src="http://www.indiecade.com/images/all_games/oneshot5.png">
  <img src="https://www.gamegrin.com/assets/games/oneshot/screenshots/oneshot-screenshot-2.jpg">
  <img src="http://www.indiecade.com/images/all_games/oneshot5.png">
</div>
 <div id="text">
 <p></p>
<p>What if You only had</p>
<p>Oneshot? Rescue the world or go home?</p>
<p>What would you do?</p>
</div>