css3 pendulum

dabblet.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;
  -webkit-animation-direction: alternate;
      }
  #clock{
    width: 15em;
   /* border: .625em solid #9d7258;*/
    padding: 1em 0em;
    margin: 0 auto;
  /*  box-shadow: 2px 1px 5px #333, -2px 1px 5px #333 ;*/
    }
  #glass{  
  width: 100%;
  }  
    #pendulum{
      width: 3em;
      margin: 0 auto;
  -webkit-animation-name: swing;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-transform-origin: 50% 0%;

      }

dabblet.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>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"result"}

for a bit more of an explanation, check out my blog post on the pendulum: http://blog.frankmtaylor.com/2012/03/23/stupid-css3-tricks-an-animated-css3-pendulum/