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

»

5 Things to Consider When Designing A Logo For Your Startup

Designing a Logo is essential because it communicates your business. ...

»

What Is Access Control?

Access Control, When running a business, there are dozens of things ...

»

Process Management Solution For a Business

In order to be successful, a company needs to be on the same page and ...

»

5 Metrics You Should Track on Every Blog Post

As a blogger, you may have developed your blog with a variety of blog ...

»

3 of the Most Dynamic LMS Plugins for WordPress

The possibilities are limitless when you want to put a course online ...

»

Do You Really Need Access to Advanced Scripting Capabilities?

One of the features you’ll find most commonly advertised when ...

»

Obvious UX Trends that will Rule 2018

For web design industry, we see new UX trends in the way we build ...

»

Java Programming Language And Its Application

Programming language is one of the main IT developments of the past ...

»

Why Can’t I Add or Install Plugins in WordPress

WordPress is a great choice when it comes to Content Management ...