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

1
2
3
4
<div id="container">
    <div class="oscillate">       
    </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...

»

How to Promote Your Business by Collecting Instagram Followers – Part 2

Promoting business is not an easy task these days with so many ...

»

Using Instagram to Optimize Your Business – Unfolding the Tricks – Part 1

Instagram is one of the most popular social networking communities ...

»

6 Mobile UX Design Techniques that work

In software development, be it a mobile app or a website, creating ...

»

Importance of website design in online branding

“A brand for a company is like a reputation for a person. You earn ...