<style type="text/css">
#whack {position: relative; margin:100px auto; width:440px; height:400px;}
#rat {position:absolute; left:0; top:0; width:440px; height:400px; background:url(mounds.png); overflow:hidden; border-radius:10px;
 box-shadow:0 15px 10px -15px rgba(0,0,0,0.9);
 }
#timer {width:20px; height:300px; background:url(timer.png) left center; position:absolute; right:2px; bottom:50px; z-index:100; border-radius:20px;
-moz-animation: timer 15s 0s 1 linear normal forwards;
-webkit-animation: timer 15s 0s 1 linear normal forwards;
-o-animation: timer 15s 0s 1 linear normal forwards;
animation: timer 15s 0s 1 linear normal forwards;
}
#whack .replay {display:block; font:bold 25px/30px arial, sans-serif; color:#fff; text-decoration:none; position:absolute; top:20px; left:160px; 
width:128px; text-align:center; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);}
#whack .replay:hover {color:#c00;}
#whack p {display:block; font:bold 25px/30px arial, sans-serif; color:#fff; position:absolute; bottom:20px; left:160px; width:128px; 
text-align:center; padding:0; margin:0; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);}
.rats {display:none;}
#rat1 + label {position:absolute; left:27px; bottom:265px;
-moz-animation: rat1 15s 0s 1 linear normal forwards;
-webkit-animation: rat1 15s 0s 1 linear normal forwards;
-o-animation: rat1 15s 0s 1 linear normal forwards;
animation: rat1 15s 0s 1 linear normal forwards;
}
#rat2 + label {position:absolute; left:283px; bottom:265px;
-moz-animation: rat2 15s 0s 1 linear normal forwards;
-webkit-animation: rat2 15s 0s 1 linear normal forwards;
-o-animation: rat2 15s 0s 1 linear normal forwards;
animation: rat2 15s 0s 1 linear normal forwards;
}
#rat3 + label {position:absolute; left:154px; bottom:176px;
-moz-animation: rat3 15s 0s 1 linear normal forwards;
-webkit-animation: rat3 15s 0s 1 linear normal forwards;
-o-animation: rat3 15s 0s 1 linear normal forwards;
animation: rat3 15s 0s 1 linear normal forwards;
}
#rat4 + label {position:absolute; left:27px; bottom:88px;
-moz-animation: rat4 15s 0s 1 linear normal forwards;
-webkit-animation: rat4 15s 0s 1 linear normal forwards;
-o-animation: rat4 15s 0s 1 linear normal forwards;
animation: rat4 15s 0s 1 linear normal forwards;
}
#rat5 + label {position:absolute; left:283px; bottom:88px;
-moz-animation: rat5 15s 0s 1 linear normal forwards;
-webkit-animation: rat5 15s 0s 1 linear normal forwards;
-o-animation: rat5 15s 0s 1 linear normal forwards;
animation: rat5 15s 0s 1 linear normal forwards;
}
#rat6 + label {position:absolute; left:27px; bottom:265px;
-moz-animation: rat6 15s 0s 1 linear normal forwards;
-webkit-animation: rat6 15s 0s 1 linear normal forwards;
-o-animation: rat6 15s 0s 1 linear normal forwards;
animation: rat6 15s 0s 1 linear normal forwards;
}
#rat7 + label {position:absolute; left:283px; bottom:265px;
-moz-animation: rat7 15s 0s 1 linear normal forwards;
-webkit-animation: rat7 15s 0s 1 linear normal forwards;
-o-animation: rat7 15s 0s 1 linear normal forwards;
animation: rat7 15s 0s 1 linear normal forwards;
}
#rat8 + label {position:absolute; left:154px; bottom:176px;
-moz-animation: rat8 15s 0s 1 linear normal forwards;
-webkit-animation: rat8 15s 0s 1 linear normal forwards;
-o-animation: rat8 15s 0s 1 linear normal forwards;
animation: rat8 15s 0s 1 linear normal forwards;
}
#rat9 + label {position:absolute; left:27px; bottom:88px;
-moz-animation: rat9 15s 0s 1 linear normal forwards;
-webkit-animation: rat9 15s 0s 1 linear normal forwards;
-o-animation: rat9 15s 0s 1 linear normal forwards;
animation: rat9 15s 0s 1 linear normal forwards;
}
#rat10 + label {position:absolute; left:283px; bottom:88px;
-moz-animation: rat10 15s 0s 1 linear normal forwards;
-webkit-animation: rat10 15s 0s 1 linear normal forwards;
-o-animation: rat10 15s 0s 1 linear normal forwards;
animation: rat10 15s 0s 1 linear normal forwards;
}
#rat11 + label {position:absolute; left:27px; bottom:265px;
-moz-animation: rat11 15s 0s 1 linear normal forwards;
-webkit-animation: rat11 15s 0s 1 linear normal forwards;
-o-animation: rat11 15s 0s 1 linear normal forwards;
animation: rat11 15s 0s 1 linear normal forwards;
}
#rat12 + label {position:absolute; left:283px; bottom:265px;
-moz-animation: rat12 15s 0s 1 linear normal forwards;
-webkit-animation: rat12 15s 0s 1 linear normal forwards;
-o-animation: rat12 15s 0s 1 linear normal forwards;
animation: rat12 15s 0s 1 linear normal forwards;
}
#rat13 + label {position:absolute; left:154px; bottom:176px;
-moz-animation: rat13 15s 0s 1 linear normal forwards;
-webkit-animation: rat13 15s 0s 1 linear normal forwards;
-o-animation: rat13 15s 0s 1 linear normal forwards;
animation: rat13 15s 0s 1 linear normal forwards;
}
#rat14 + label {position:absolute; left:27px; bottom:88px;
-moz-animation: rat14 15s 0s 1 linear normal forwards;
-webkit-animation: rat14 15s 0s 1 linear normal forwards;
-o-animation: rat14 15s 0s 1 linear normal forwards;
animation: rat14 15s 0s 1 linear normal forwards;
}
#rat15 + label {position:absolute; left:283px; bottom:88px;
-moz-animation: rat15 15s 0s 1 linear normal forwards;
-webkit-animation: rat15 15s 0s 1 linear normal forwards;
-o-animation: rat15 15s 0s 1 linear normal forwards;
animation: rat15 15s 0s 1 linear normal forwards;
}

.rats + label {width:128px; height:0; background: url(rat.png) 0 0; overflow:hidden;}
.rats + label img {width:100%; height:100%; display:none;}
.rats:checked + label img {display:block;}

#score {position:absolute; left:200px; top:289px; width:50px; height:50px; overflow:hidden;}
#scores {margin-top:-750px;}
.score {display:block; width:50px; height:50px; border:0; padding:0; margin:0 0 -50px 0;
-moz-transition:0.25s;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
.score:checked {display:block; width:50px; height:50px; border:0; padding:0; margin:0;}
#scored b {display:block; width:50px; height:50px; font:bold 40px/50px arial, sans-serif; color:#c00; text-align:center;}

@-moz-keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@-moz-keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@-moz-keyframes timer {
0% {height:300px;}
100% {height:0;}
}

/* for Opera */
@-o-keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@-o-keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@-o-keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@-o-keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@-o-keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@-o-keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@-o-keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@-o-keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@-o-keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@-o-keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@-o-keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@-o-keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@-o-keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@-o-keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@-o-keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@-o-keyframes timer {
0% {height:300px;}
100% {height:0;}
}
/* for Safari and Chrome */
@-webkit-keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@-webkit-keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@-webkit-keyframes timer {
0% {height:300px;}
100% {height:0;}
}

/* for IE10 and latest Firefox */
@keyframes rat1 {
0% {height:0;}
40% {height:0;}
41% {height:128px;}
46% {height:128px;}
47% {height:0;}
100% {height:0;}
}
@keyframes rat2 {
0% {height:0;}
30% {height:0;}
31% {height:128px;}
40% {height:128px;}
41% {height:0;}
100% {height:0;}
}
@keyframes rat3 {
0% {height:0;}
20% {height:0;}
21% {height:128px;}
26% {height:128px;}
27% {height:0;}
100% {height:0;}
}
@keyframes rat4 {
0% {height:0;}
25% {height:0;}
26% {height:128px;}
33% {height:128px;}
34% {height:0;}
100% {height:0;}
}
@keyframes rat5 {
0% {height:0;}
15% {height:0;}
16% {height:128px;}
21% {height:128px;}
22% {height:0;}
100% {height:0;}
}
@keyframes rat6 {
0% {height:0;}
55% {height:0;}
56% {height:128px;}
60% {height:128px;}
61% {height:0;}
100% {height:0;}
}
@keyframes rat7 {
0% {height:0;}
60% {height:0;}
62% {height:128px;}
68% {height:128px;}
69% {height:0;}
100% {height:0;}
}
@keyframes rat8 {
0% {height:0;}
45% {height:0;}
46% {height:128px;}
51% {height:128px;}
52% {height:0;}
100% {height:0;}
}
@keyframes rat9 {
0% {height:0;}
50% {height:0;}
51% {height:128px;}
55% {height:128px;}
56% {height:0;}
100% {height:0;}
}
@keyframes rat10 {
0% {height:0;}
35% {height:0;}
36% {height:128px;}
41% {height:128px;}
42% {height:0;}
100% {height:0;}
}
@keyframes rat11 {
0% {height:0;}
80% {height:0;}
81% {height:128px;}
86% {height:128px;}
87% {height:0;}
100% {height:0;}
}
@keyframes rat12 {
0% {height:0;}
85% {height:0;}
87% {height:128px;}
93% {height:128px;}
94% {height:0;}
100% {height:0;}
}
@keyframes rat13 {
0% {height:0;}
65% {height:0;}
66% {height:128px;}
71% {height:128px;}
72% {height:0;}
100% {height:0;}
}
@keyframes rat14 {
0% {height:0;}
70% {height:0;}
71% {height:128px;}
76% {height:128px;}
77% {height:0;}
100% {height:0;}
}
@keyframes rat15 {
0% {height:0;}
75% {height:0;}
76% {height:128px;}
81% {height:128px;}
82% {height:0;}
100% {height:0;}
}
@keyframes timer {
0% {height:300px;}
100% {height:0;}
}
</style>
<div id="whack">
    <div id="rat">
	   <input name="rat1" id="rat1" class ="rats" type="radio"><label for="rat1"><img src="rat2.png" alt=""></label>
	   <input name="rat2" id="rat2" class ="rats" type="radio"><label for="rat2"><img src="rat2.png" alt=""></label>
	   <input name="rat3" id="rat3" class ="rats" type="radio"><label for="rat3"><img src="rat2.png" alt=""></label>
	   <input name="rat4" id="rat4" class ="rats" type="radio"><label for="rat4"><img src="rat2.png" alt=""></label>
	   <input name="rat5" id="rat5" class ="rats" type="radio"><label for="rat5"><img src="rat2.png" alt=""></label>
	   <input name="rat6" id="rat6" class ="rats" type="radio"><label for="rat6"><img src="rat2.png" alt=""></label>
	   <input name="rat7" id="rat7" class ="rats" type="radio"><label for="rat7"><img src="rat2.png" alt=""></label>
	   <input name="rat8" id="rat8" class ="rats" type="radio"><label for="rat8"><img src="rat2.png" alt=""></label>
	   <input name="rat9" id="rat9" class ="rats" type="radio"><label for="rat9"><img src="rat2.png" alt=""></label>
	   <input name="rat10" id="rat10" class ="rats" type="radio"><label for="rat10"><img src="rat2.png" alt=""></label>
	   <input name="rat11" id="rat11" class ="rats" type="radio"><label for="rat11"><img src="rat2.png" alt=""></label>
	   <input name="rat12" id="rat12" class ="rats" type="radio"><label for="rat12"><img src="rat2.png" alt=""></label>
	   <input name="rat13" id="rat13" class ="rats" type="radio"><label for="rat13"><img src="rat2.png" alt=""></label>
	   <input name="rat14" id="rat14" class ="rats" type="radio"><label for="rat14"><img src="rat2.png" alt=""></label>
	   <input name="rat15" id="rat15" class ="rats" type="radio"><label for="rat15"><img src="rat2.png" alt=""></label>
    </div>
    <div id="score">
	   <div id="scores">
		  <input name="rat1" id="score1" class ="score" checked="checked" type="radio">
		  <input name="rat2" id="score2" class ="score" checked="checked" type="radio">
		  <input name="rat3" id="score3" class ="score" checked="checked" type="radio">
		  <input name="rat4" id="score4" class ="score" checked="checked" type="radio">
		  <input name="rat5" id="score5" class ="score" checked="checked" type="radio">
		  <input name="rat6" id="score6" class ="score" checked="checked" type="radio">
		  <input name="rat7" id="score7" class ="score" checked="checked" type="radio">
		  <input name="rat8" id="score8" class ="score" checked="checked" type="radio">
		  <input name="rat9" id="score9" class ="score" checked="checked" type="radio">
		  <input name="rat10" id="score10" class ="score" checked="checked" type="radio">
		  <input name="rat11" id="score11" class ="score" checked="checked" type="radio">
		  <input name="rat12" id="score12" class ="score" checked="checked" type="radio">
		  <input name="rat13" id="score13" class ="score" checked="checked" type="radio">
		  <input name="rat14" id="score14" class ="score" checked="checked" type="radio">
		  <input name="rat15" id="score15" class ="score" checked="checked" type="radio">
		  <div id="scored"><b>00</b><b>01</b><b>02</b><b>03</b><b>04</b><b>05</b><b>06</b><b>07</b>
<b>08</b><b>09</b><b>10</b><b>11</b><b>12</b><b>13</b><b>14</b><b>15</b></div>
	   </div>
    </div>
    <p>SCORE</p>
    <div id="timer"></div>
    <a class ="replay" href="javascript:window.location%20=%20window.location;">REPLAY</a>
</div>