CSS3 Animated clock accompanied by an example of code

My clock obsession begins (read the article about the beginning) while I worked on the design for Web Talk To second version. Since then I continuously am creating clocks for the site design or like in the case of this article - for demonstration of the animation effect.

The version 3 of Web Talk To has a clock in the right corner of the screen. This clock is just an image and appears without any animation effect. This clock served as a starting point in designing the CSS3 Animated clock.

We are going to create the effect using pure CSS.

The name for the animation.

Our animation name will be – rotate. We are going to rotate things, so it is semantically correct to use rotate as a keyword.

@keyframes rotate {
}

Keyframes are used to specify the values for the animating properties at various points during the animation. The keyframes specify the behavior of one cycle of the animation; the animation may iterate one or more times.

Keyframes are specified using a specialized CSS at-rule. A @keyframes rule consists of the keyword "@keyframes", followed by an identifier giving a name for the animation (which will be referenced using ‘animation-name’), followed by a set of style rules (delimited by curly braces).

W3C

Specifying the values for the animating properties.

We are going to use CSS3 transform properties and two keyframe selectors. The transform property applies a transformation to an element. This property allows you to rotate, scale and more.

In simple words: we are going to transform the element by rotating it from 0 degrees to 360 degrees during one cycle (0% - 100%).

@keyframes rotate {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

Applying animation

This will associate our animation to all page elements with a class "second".

.second {
animation: rotate;
}

The animation’s Duration, Timing Function and Infinite

Now we will set the duration of our animation equal 7 seconds and the timing as a linear (the animation has the same speed from start to end). The “infinite” will insure the animation from stopping and we will be able to enjoy it indefinitely.

.second {
animation: rotate 7s infinite linear;
}

Web Talk To me 24/8

The cool CSSDeck tool gives the ability to edit the code and immediately observe the changes. Simply start to change the CSS or HTML. Enjoy it.

CSS3 Animated Clock

View the Demo