CSS3浮动的小猪动画

一款很可爱的纯CSS3浮动小猪，同时小猪在浮动时投影也会跟着浮动，动画效果非常逼真。
#pig {
  height:20em; width:20em;
  margin:5em auto; position:relative;
  border-radius:50%;
  -webkit-box-shadow:0 0.125em 1em #fca inset, 0 -1.5em 5em #923 inset;
  box-shadow:0 0.125em 1em #fca inset, 0 -1.5em 5em #923 inset;
  background:-webkit-radial-gradient(50% 30%, #fa9 20%, #f46 100%);
  background:radial-gradient(50% 30%, #fa9 20%,#f46 100%);
  -webkit-animation: float ease-in-out 1.5s infinite;
  animation: float ease-in-out 1.5s infinite;
}
#pig:before{
  -webkit-animation: shadow ease-in-out 1.5s infinite;
  animation: shadow ease-in-out 1.5s infinite;
  content:'';
  display:block;
  position:relative;
  top:10em;
  height:.5em;
  margin:0 2em;
  border-radius:80% 60%;
  -webkit-box-shadow:0 14em 1em 1em rgba(0,0,0,.7);
  box-shadow:0 14em 1em 1em rgba(0,0,0,.7);
  background:rgba(0,0,0,0);
  opacity: .5;
}
.ear {
  height:8em; width:5em;
  position:absolute; top:2em;
  background:-webkit-radial-gradient(50% 30%, #923 20%, #612 100%);
  background:radial-gradient(50% 30%, #923 20%,#612 100%);
}
.ear.left{
  left:-1em;
  border-radius:250% 50% 250% 20%;
    -webkit-box-shadow:0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset;
    box-shadow:0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset;
}
.ear.right{
  right:-1em;
  border-radius:50% 250% 20% 250%;
  -webkit-box-shadow:-0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset;
  box-shadow:-0.125em 0.125em 0.5em rgba(90,0,0,0.25), 0 -0.0625em 0.25em rgba(0,0,0,0.5) inset;
}
.eye{
  height:7em; width:3.5em;
  position:absolute; top:5em;
  -webkit-box-shadow:0 -1em 1em rgba(0,0,100,0.15) inset,0 -0.25em 0.25em rgba(0,0,100,0.2) inset, 0 0.125em 0.75em rgba(90,0,0,0.2), 0 0.25em 1em rgba(90,0,0,0.3  );
  box-shadow:0 -1em 1em rgba(0,0,100,0.15) inset,0 -0.25em 0.25em rgba(0,0,100,0.2) inset, 0 0.125em 0.75em rgba(90,0,0,0.2), 0 0.25em 1em rgba(90,0,0,0.3  );
	background:#fff;
}
.eye.left{
	left:28%;
  border-radius:100% 50%;
}
.eye.right{
	right:28%;
  border-radius:50% 100%;
}
.eye:after{
  height:3em; width:2em;
  position:absolute; top:1em;
  border-radius:100%;
  -webkit-box-shadow:0 -0.25em 0.5em #111 inset;
  box-shadow:0 -0.25em 0.5em #111 inset;
	content:'';
  background:#333;
}
.eye.left:after{ left:35%; }
.eye.right:after{ right:35%; }
.nose { 
  height:4em; width:6em;
  position:absolute; top:60%; left:36%;
  border-radius:80% 80% 70% 70%;
  -webkit-box-shadow:0 0.25em 1em rgba(90,0,0,0.5), 0 -0.0625em #fff;
  box-shadow:0 0.25em 1em rgba(90,0,0,0.5), 0 -0.0625em #fff;
	background:-webkit-radial-gradient(50% 30%, #fca 20%, #fa9 100%);
	background:radial-gradient(50% 30%, #fca 20%,#fa9 100%);
}
.nose:before, .nose:after {
  height:2em; width:0.5em;
  position:absolute; top:1em;
  border-radius:100%;
  -webkit-box-shadow:0 0.0625em #fff,0 0 0.5em rgba(90,0,0,0.5);
  box-shadow:0 0.0625em #fff,0 0 0.5em rgba(90,0,0,0.5);
	content:'';
  background:#612;
}
	.nose:before { left:1.75em; }
	.nose:after { right:1.75em; }

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1em);
    transform: translateY(1em);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1em);
    transform: translateY(1em);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes shadow {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateY(1em) scale(.9);
    transform: translateY(1em) scale(.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: .5;
  }
}

@keyframes shadow {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateY(1em) scale(.9);
    transform: translateY(1em) scale(.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: .5;
  }
}