A clock made in CSS3 | NO Javascript

Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first CSS3 clock. This clock has 3 hands: seconds, minutes and an hour. All hands by default start moving from 12.



In this tutorial we going to use some of the CSS3 major elements.

• Animation


• Transform


• Keyframes

All three elements need to be cross browser coded.

• For firefox -moz-


• For Chrome -webkit-

So here is the css code for seconds hand.

[css]
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}
[/css]

The animation takes following properties:

animation:name duration timing-function delay iteration-count direction;

Here we are going to use name, duration, direction and iteration-count elements.

Our name is rotate, 60 seconds for one animation, direction will be linear and infinite loop animation.

Following is the keyframe code,

[css]
@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
[/css]

We set points in this keyframe, the start point and the end point. In from point we will use transform element to rotate it from 0 degree and in to we set it till 360 degree. So in every animation it will rotate from 0 degree to 360 degree.

Similarly we code for the minute and the hour hand.

Entire Code:

[html]
<style>
body{background:#000000;}
#wrapper {
left: 40%;
padding: 10px;
position: absolute;
top: 20%;
width: 300px;
}
.seconds{
width:200px;
height:200px;
border-left:2px solid #2187e7;
display:block;
-moz-animation:rotate 60s infinite linear;
-webkit-animation:rotate 60s infinite linear;
border-radius:50%;
}

.minutes{
-moz-animation:rotate 3600s infinite linear;
-webkit-animation:rotate 3600s infinite linear;
width:100px;
height:100px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 61px;
top: 60px;
box-shadow: 0 0 35px #fff;
}

.hour{
-moz-animation:rotate 43200s infinite linear;
-webkit-animation:rotate 43200s infinite linear;
width:50px;
height:50px;
border-left:2px solid #fff;
border-right:2px solid #fff;
display:block;
border-radius:50%;
position: absolute;
left: 85px;
top: 87px;
box-shadow: 0 0 35px #fff;
}

@-moz-keyframes rotate
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes rotate
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

.seconds span{
border-left: 1px solid #FFFFFF;
display: block;
height: 100px;
left: 100px;
position: relative;
top: 0;
width: 100px;
}

.minutes span{
border-left: 1px solid #FFFFFF;
display: block;
height: 50px;
left: 50px;
position: relative;
top: 0;
width: 50px;
}

.hour span{
border-left: 1px solid #FFFFFF;
display: block;
height: 25px;
left: 25px;
position: relative;
top: 0;
width: 25px;
}

</style>
<div id="wrapper">
<div class="seconds">
<span></span>
</div>
<div class="minutes">
<span></span>
</div>
<div class="hour">
<span></span>
</div>
</div>
[/html]