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:

HTML

<div id="container">
    <div class="oscillate">       
    </div>
</div>

CSS

html{text-align:center;}
body{width:950px;margin:0 auto;font-family:trebuchet ms;text-align:left}
.clear{clear:both;}
 
@-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('http://www.webdeveloperjuice.com/wp-content/uploads/2011/08/wall-clock1.jpg') 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('http://www.webdeveloperjuice.com/wp-content/uploads/2011/08/pendulum.png') 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.

Recently Published

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...

»

Know-How DevOps Benefits Your Business

The organizations in this current fast-paced environment need to ...

»

10 Best Prototyping Tools for UI/UX Designers

Website design for a client gets only successful if you follow their ...

»

Social Media Marketing: Strategy To Boost Ecommerce-Traffic

According to a recent study, the experts revealed that people aged ...

»

How Flutter Can Help Reduce Overall Mobile App Development Cost?

Before jumping on answering the question, let me first walk you ...

»

Which One is Better? DigitalOcean Or AWS?

Digitalocean or AWS: Picking a cloud service for your application or ...

»

Killing way to select Domain Name and Hosting

Planning to launch your online presence? We know it’s all very ...

»

7+ blogs to inspire how they made more than $200 in a day

On this page I want to go through the blogs on how they earn money ...