@keyframes spring {
0% {transform:scale(1) translateY(0)}
10% {transform:scale(1.2,.6)}
30% {transform:scale(0.8,1.1) translateY(-45px)}
50% {transform:scale(1) translateY(0)}
100% {transform:translateY(0)}
}
#spr {position:absolute;top:60px;left:320px;animation:spring 2s;animation-timing-function:ease}
#ani{position:relative;animation-duration:2.5s;animation-name:fade}
@keyframes fade {
0% {opacity:0}
65% {opacity:0}
100% {opacity:1}}
#flap{position:absolute;top:190px;}
#h1{position:absolute;width:630px;top:780px;margin-left:19%;z-index:5;font-weight:900;font-size:32px;font-family:'Courier New',Courier New}
h2{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100px;margin:auto;display:block;font-family:'atma'}
h2 p{position:relative;top:45px;left:330px;display:inline-block;animation:bounce .5s ease infinite alternate;font-size:82px;color:#f80;text-shadow:0 1px 0 #aaa, 0 2px 0 #aaa, 0 3px 0 #aaa, 0 4px 0 #aaa,0 5px 0 #aaa, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,0 9px 0 transparent, 0 10px 10px rgba(0,0,0,.4)}
h2 p:nth-child(2){animation-delay:.1s;color:#f33}
h2 p:nth-child(3){animation-delay:.2s;color:#0f0}
h2 p:nth-child(4){animation-delay:.3s;color:#0af}
h2 p:nth-child(5){animation-delay:.4s;color:#f0f}
h2 p:nth-child(6){animation-delay:.5s;color:#fff}
@keyframes bounce{
100% {top:0px;text-shadow:0 1px 0 #aaa,0 2px 0 #aaa,0 3px 0 #aaa,0 4px 0 #aaa,0 5px 0 #aaa,0 6px 0 #aaa,0 7px 0 #aaa,0 8px 0 #aaa,0 9px 0 #aaa,0 50px 25px rgba(0,0,0,.3)}
}