Home / Articles / Programming languages / Markup languages / HTML & CSS / Creating analog clock with responsive design using animation in CSS3

Creating analog clock with responsive design using animation in CSS3

Creating analog clock with responsive design using animation in CSS3
 
Creating analog clock with responsive design using animation in CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


The following article is intended for demonstration purposes and shows how animation in CSS3 can be used to create analog clock with responsive design.

The analog clock in this article has a simple appearance, no numbers, no marks and this means less code. Things like adding numbers and marks for the clock is not a complex task. This article skips it to show only the principle of operation of the analog clock using animation in CSS3.

The HTML structure of the analog clock is very simple. It consists of several div elements where each div element has its own class name. Each name of class is very descriptive and you can use the name to guess what that class is intended for.

HTML code:

<div class="clock-case">
  <div class="clock-dial">
    <div class="clock-hour-hand"></div>
    <div class="clock-minute-hand"></div>
    <div class="clock-second-hand"></div>
    <div class="clock-nut"></div>
    <div class="clock-ratio"></div>
  </div>
</div>

CSS styles which are used for this analog clock can be divided into two groups: keyframes and regular styles.

The CSS keyframes for this analog clock do very simple work: they can make an element rotate by 360 degrees (one circle), thus performing simple CSS3 animation. Also, as you will notice, vendor prefixes are used with keyframes to make them work in every modern browser.

CSS keyframes:

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

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

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

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

The rest of styles (which above were called "regular styles") build all the parts of the clock including: clock case, clock hands, clock dial, clock nut.

There is one more part of this analog clock which wasn't mentioned above and doesn't have anything in common with the real (physical) clock, this part is div element with class "clock-ratio". The styles used for this class, make the whole clock keep aspect ratio 1 to 1 when the clock changes its size (responsive design). The same principle of work is used in the following article for keeping aspect ratio in videos: Resizing YouTube and HTML5 videos proportionally using CSS for responsive web design.

Also these styles run animation using keyframes above to rotate each block, which is represented as hand of the clock, by 360 degrees for different period of time: 60 seconds for second hand, 3600 seconds for minute hand and 43200 seconds for hour hand.

CSS styles:

.clock-case {
  background-color: #62696F;
  padding: 8%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.clock-dial {
  background-color: #CECED0;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.clock-ratio {
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

.clock-second-hand {
  width: 2%;
  height: 100%;
  margin-left: -1%;
  position: absolute;
  left: 50%;
  -webkit-animation: rotation 60s infinite linear;
  -moz-animation: rotation 60s infinite linear;
  -o-animation: rotation 60s infinite linear;
  animation: rotation 60s infinite linear;
}

.clock-second-hand:before {
  content: "";
  background-color: red;
  width: 100%;
  height: 55%;
  top: 4%;
  position: absolute;
}

.clock-minute-hand {
  width: 3%;
  height: 100%;
  margin-left: -1.5%;
  position: absolute;
  left: 50%;
  -webkit-animation: rotation 3600s infinite linear;
  -moz-animation: rotation 3600s infinite linear;
  -o-animation: rotation 3600s infinite linear;
  animation: rotation 3600s infinite linear;
}

.clock-minute-hand:before {
  content: "";
  background-color: #404040;
  width: 100%;
  height: 50%;
  top: 8%;
  position: absolute;
}

.clock-hour-hand {
  width: 4%;
  height: 100%;
  margin-left: -2%;
  position: absolute;
  left: 50%;
  -webkit-animation: rotation 43200s infinite linear;
  -moz-animation: rotation 43200s infinite linear;
  -o-animation: rotation 43200s infinite linear;
  animation: rotation 43200s infinite linear;
}

.clock-hour-hand:before {
  content: "";
  background-color: #000000;
  width: 100%;
  height: 46%;
  top: 12%;
  position: absolute;
}

.clock-nut {
  position: absolute;
  top: 46%;
  left: 46%;
  width: 8%;
  height: 8%;
  background-color: #000000;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

Don't forget to resize browser window to see how the analog clock changes its appearance proportionally.

Live demo

As you may notice, every time you load the page with the example above, the clock always starts from the beginning. There is no way to get and set time using only CSS, even the latest CSS3 can't handle it. It can be only done by using JavaScript.

Here is a simple JavaScript code which takes system’s time and provides it to the clock. To make it even simpler, jQuery is used.

The principle of work of the current JavaScript code is simple, it calculates the amount of seconds for each hand of the clock and sets animation-delay CSS property by JavaScript when the page with the clock is loaded. It sets seconds with negative values in order to set initial position of hands in CSS3 animation. This trick is accomplished using animation-delay CSS property with negative value.

Before using this script, don't forget to add to the page JavaScript file with jQuery (the example below uses second version of jQuery).

JavaScript code:

jQuery( document ).ready(function() {
  currentDate = new Date();
  currentSeconds = currentDate.getSeconds();
  currentMinutes = currentSeconds + ( currentDate.getMinutes() * 60 );
  currentAnalogHours = ( currentDate.getHours() > 11 ) ? currentDate.getHours() - 12 : currentDate.getHours();
  currentHours = currentMinutes + ( currentAnalogHours * 3600 );
  jQuery( '.clock-second-hand' ).css( 'animation-delay', '-' + currentSeconds + 's' );
  jQuery( '.clock-minute-hand' ).css( 'animation-delay', '-' + currentMinutes + 's' );
  jQuery( '.clock-hour-hand' ).css( 'animation-delay', '-' + currentHours + 's' );
});

Live demo

The following archive contains all the examples above:


 

Read also

Animation in CSS3

Animation in CSS3

CSS3: media queries

CSS3: media queries

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation