In this tutorial we are going to walk through the process of creating a ticking clock in CSS, using CSS3 features animation and transform. The animation will start when you load the page, the animation is the same for all hands we just need to change the timing used.
To view what we are going to create you can see the demo of the CSS clock below.
The HTML
First we start off by creating the HTML which we are going to use for the clock, this is very simple you just need a div and 7 child div's inside. The outer div is used for the clock face and border, we are going to indicate the points of 12 o'clock, 3 o'clock, 6 o'clock and 9 o'clock with a line at each point. We then need a div for the hour hand, minute hand and second hand.
<div class="clock">
<div class="twelve"></div>
<div class="three"></div>
<div class="six"></div>
<div class="nine"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
Clock Face
To start off the styling of the clock we are going to change the look of the clock face, using the clock class. This is just going to be a circle with a border and a white background colour. To make a circle in CSS we just need to use the border-radius property and assign the value of 50%.
.clock
{
background: #FFF;
border: 10px solid #7A7A7A;
border-radius: 50%;
box-sizing: border-box;
height:300px;
margin: 0 auto;
position: relative;
width: 300px;
}
Hour Points
For the hour points we need to create a line and depending on what point of the clock they are going to be place we change the height or the width. First start off by assigning a background colour to all hour points of the clock. Then you can assign the height and width for all the lines for the 12 and 6 points we make the height larger than the width. For the 3 and 9 points we assign the width to be larger than the height. As we made all of the hour points absolute positioned we then use the top and left properties to position these around the clock.
.twelve,
.three,
.six,
.nine
{
background: #333;
position: absolute;
}
.twelve,
.six
{
height: 10px;
width: 4px;
}
.three,
.nine
{
height: 4px;
width: 10px;
}
.twelve
{
left: 50%;
top: -1px;
}
.three
{
right: -1px;
top: 50%;
}
.six
{
left: 50%;
bottom: -1px;
}
.nine
{
left: -1px;
top: 50%;
}
Clock Hands
With the look of the clock finished we can then start to style and add the animation for the ticking to the clock hands. So we know the difference between the 3 clock hands we change the height and change the colour of each hand. All of the hands will also use the tick animation this will rotate the hands 360 degrees around the clock. The hour hand will be the longest and we need to assign the animation for the hand to use the tick animation, which we will define later. Because this is the hour hand we need to make sure that the full rotation takes 12 hours or 43200 seconds.
.hour
{
height: 120px;
width: 4px;
background: #333;
position: absolute;
left: 50%;
top: 20px;
animation: tick 43200s infinite linear;
-webkit-animation: tick 43200s infinite linear;
}
The minute hand will be a different colour and a different height. This animation will only need to take 1 hour for the hand to rotate or 3600 seconds.
.minute
{
height: 100px;
width: 4px;
background: #777;
position: absolute;
left: 50%;
top: 40px;
animation: tick 3600s infinite linear;
-webkit-animation: tick 3600s infinite linear;
}
Finally the second hand will also be a different colour and height to the other hands, but this hand needs to complete a full rotation in 1 minute or 60 seconds.
.second
{
height: 60px;
width: 4px;
background: #FC0505;
position: absolute;
left: 50%;
top: 80px;
animation: tick 60s infinite linear;
-webkit-animation: tick 60s infinite linear;
}
All the tick animation will do is use the property transform to rotate the hands around the clock. But the rotate property will rotate the element from the center point where we want to set the point of rotation to be at the bottom center of the hands. To change the point of rotation we use the CSS property transform-origin and set the point of the transform to be the middle center of the element.
.hour, .minute, .second
{
transform-origin: 2px 100%;
-webkit-transform-origin: 2px 100%;
}
Clock Animation
With the clock and the hands setup we can now add the tick animation, all this will do is rotate the hands 360 degrees, because we changed the point of rotation it will move the hands around the center point of the clock. Add a @keyframe that has the transform property and set the rotate to 360 degrees, remember to add your webkit prefixes as at the current time unprefixed keyframe is not supported on webkit browsers.
@keyframes tick {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes tick {
to {
-webkit-transform: rotate(360deg);
}
}