CSS3 Pendulum

A CSS3 pendulum

HTML

<div id="clock">
<div id="face">


</div>
<div id="glass">
  <div id="pendulum">
    <div id="stem"></div>
    <!--/stem--> 
    <div id="ball"></div>
    <!--/ball--> 
  </div><!--/pendulum-->
  <div class="ball-shadow"></div>
</div>


</div>

CSS

body{
  background: #f9f9f9;
  }

div, article, section, p, ul, li html, body{
  margin: 0;
  padding:0;
  }
  
@-webkit-keyframes swing{
  from{
    -webkit-transform: rotate(15deg);
    }
    
    to{
     -webkit-transform: rotate(-15deg);
      }
  }
@-webkit-keyframes shadow{
  from{
    box-shadow: 3px 2px 5px #999;
    } 
    to{
     box-shadow: -3px 2px 3px #999;
      }
  }
@-webkit-keyframes ball-shadow{
  from{
    -webkit-transform: rotate(-15deg) scalex(1.5) skew(60deg) translate(-60px,0);
      box-shadow: 30px 0 30px #777;
}
    to{
    -webkit-transform: rotate(-10deg) scalex(2) skew(60deg) translate(-40px,0);
            box-shadow: 3px 0 50px #888;
      }
  }  
  
#face{
  display:block;
  width: 5em;
  height: 5em;
  border-radius: 5em;
  border: .625em solid #444;
  position:relative;
  bottom: -3.5em;
  margin: 0 auto;
  }  
#stem{
  background: #444;
  height: 20em;
  width: 3em;
  border-top-right-radius: 1.5em ;
  border-top-left-radius: 1.5em;
  border-bottom-left-radius: 1em 11em;
  border-bottom-right-radius: 1em 11em;
      -webkit-animation-name: shadow;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  }
   
#ball{
  background: #dcbe65;
  height: 3em;
  width: 3em;
  border-radius: 100%;
      -webkit-animation-name: shadow;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  }
    .ball-shadow{
    -webkit-transform: rotate(-5deg) scalex(2) skew(80deg);
      right: 20%;
      bottom: 10%;
      height: .75em;
      width: .75em;
      display: block;
  background: transparent;
      border-radius:1em;
      -webkit-animation-name: ball-shadow;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
 ...