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

»

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 ...

»

5 Website Security Myths You Should Know About

Businesses today are getting increasingly dependent on their ...

»

Capturing HD Videos with Movavi Screen Capture Studio

As you probably know High Definition (HD) videos are regarded as the ...

»

Modern Changes That You Should Consider for Your Web Site

Websites need to modernize and get updated periodically otherwise ...

»

Super Tips For A Flawless Website

A website has a specific purpose. And your job is to design a website ...

»

Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...

»

What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...