An animation is an effect that lets an element gradually change from one style to another.

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

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.