pendulum css3

a pendulum with only css

by voodoomonkey

HTML

<div id='container'>
    <img src='https://dl.dropboxusercontent.com/u/97182346/frame.png' id='handle'></img>
     <img src='https://dl.dropboxusercontent.com/u/97182346/pin.png' id='pin'></img>
</div>

CSS

@-webkit-keyframes pendulum {
    from {
        -webkit-transform:rotate(-7deg);
    }
    to {
        -webkit-transform:rotate(7deg);
    }
}
@-moz-keyframes pendulum {
    from {
        -moz-transform:rotate(-7deg);
    }
    to {
        -moz-transform:rotate(7deg);
    }
}
@-o-keyframes pendulum {
    from {
        -o-transform:rotate(-7deg);
    }
    to {
        -o-transform:rotate(7deg);
    }
}
@keyframes pendulum {
    from {
        transform:rotate(-7deg);
    }
    to {
        transform:rotate(7deg);
    }
}
#handle {
    position:absolute;
    top:100px;
    left:100px;
    z-index:-5;
    -webkit-transform-origin:50% 40px;
    -moz-transform-origin:50% 40px;
    -o-transform-origin:50% 40px;
    transform-origin:50% 40px;
    -webkit-animation: pendulum 1s ease-in-out infinite alternate;
    -moz-animation: pendulum 1s ease-in-out infinite alternate;
    -o-animation: pendulum 1s ease-in-out infinite alternate;
    animation: pendulum 1s ease-in-out infinite alternate;
}
#pin{
    display:block;
    width:64px;
    height:64px;
  position:absolute;
    top:70px;
    left:292px;
    z-index:-5;
}