CSS3 animations, transforms, transitions, filters, the whole deal. And oh yeah, Spongebob.

index.html

<h1>Choose your character</h1>
<form>
  <li>
    <input name="r" type="radio" id="spongebob" />
    <label>Spongebob</label>
  </li>
  <li>
    <input name="r" type="radio" id="patrick" />
    <label>Patrick</label>
  </li>
  <li>
    <input name="r" type="radio" id="squidward" />
  	<label>Squidward</label>
  </li>
  <li>
    <input name="r" type="radio" id="sandy" />
  	<label>Sandy</label>
  </li>
  <li>
    <input name="r" type="radio" id="gary" />
    <label>Gary</label>
  </li>
</form>

style.css

@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
input { display:block; appearance:none; }

*{ box-sizing:border-box; }

body { background-image:-webkit-radial-gradient(center, ellipse closest-corner, #fbfbfb 0%, #d2d2d2 100%); font-family: 'Gloria Hallelujah', sans-serif; text-align:center; }

form {
   width:950px;
  margin:0 auto;
}

h1 { display:inline-block; padding:20px 80px; font-size:2em; }

li { animation:flyin 3s 0.5s ease-out both infinite; list-style:none; float:left; color:transparent; transition:color 0.2s; }

li:nth-child(2) { animation-delay:0.8s; }
li:nth-child(3) { animation-delay:1.3s; }
li:nth-child(4) { animation-delay:1.6s; }
li:nth-child(5) { animation-delay:1.9s; }

  @keyframes flyin {
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px); }
  }

li:hover { color:#000; }

input {
  display:block;
  margin:15px 15px 0;
  width:160px;
  height:160px;
  background-image:url(http://www.eposters.ie/images/FP1764_01.jpg);
  border-radius:50%;
  border:2px solid #222;
  transition:0.2s ease;
  opacity:0.5;
  -webkit-filter:grayscale(1);
  cursor:pointer;

}

input:hover, input:checked { opacity:1.5; -webkit-filter:grayscale(0); transform:translateY(-10px); box-shadow:0 10px 20px #ccc; }


input:checked { animation:float 1.1s ease-in-out infinite; border-radius:25%; }
@keyframes float { 0%,100%{ transform:translateY(-10px); } 50%{ transform:translateY(5px;);  } }
input:checked ~ label { color:#000; }



#spongebob { background-position:415px 295px; }
#patrick { background-position:270px 350px; }
#squidward { background-position:348px 415px; }
#sandy { background-position:500px 360px; }
#gary { background-position:170px 235px; }