How To : Create Pendulum Clock Using Pure CSS

Earlier today I was sitting in my room and watching a clock and wondering if I can make a pendulum. My first thought was that I should do it using jQuery but then I realized CSS 3 too supports animations. So I tried it using css3. Although , I love jQuery but I always follow pure CSS solutions.

So lets start – Here is HTML:




body{width:950px;margin:0 auto;font-family:trebuchet ms;text-align:left}
@-webkit-keyframes oscillation
{ from { -webkit-transform:rotate(-9deg); } to{ -webkit-transform:rotate(9deg); }
@-moz-keyframes oscillation
{ from{ -moz-transform:rotate(-9deg); } to{ -moz-transform:rotate(9deg); }
#container { background: url('') no-repeat; width:200px; height:700px; margin: 0 auto; position:relative; z-index:1;
.oscillate{ -webkit-transform-origin:50% -40px; -moz-transform-origin:50% -40px; -webkit-animation: oscillation 1s ease-in-out infinite alternate; -moz-animation: oscillation 1s ease-in-out infinite alternate; background: url('') no-repeat; width: 50px; height:110px; z-index:0; position:absolute; top:217px; left:83px;

Ah! That’s it. Here is the working Demo

Comments and opinions are welcome.

Scroll to Top