CSS3: The Power of Animations

A brief introduction to CSS3 was given in a previous article. The biggest difference between CSS3 and the previous versions of CSS is that CSS3 is divided into several separate documents called “modules”, instead of defining and implementing all features in a single large documentation. Some of the most important CSS3 modules are Box Model, 2D and 3D Transformations, Animations, Multiple Column Layout and User Interface etc. In this article we would discuss one of the coolest features presented in CSS3: Animations.

An animation is basically an effect that lets an element gradually change from one style to another. The method of @keyframes is required to create animations in CSS3. The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style. For example, consider the code:

The above code works in @keyframes method to make a transition of the background color from red to yellow. Now to create CSS3 animations with the @keyframes rule, bind the animation to a selector by specifying at least these two CSS3 animation properties: The name and the duration of the animation. For example, consider the piece of code:

The above code binds “myfirst” animation to a div element, and its duration is 5 seconds.  In case the duration is not mentioned, the animation will not run, because the default value is 0. Another important method is that of ‘delay’ which gives specified number of delays before or between the animations. For example,

With the above code, a two second delay is given before the animation is executed. This feature of animations is a very strong and distinguishing feature of CSS3 which certainly adds a lot to web functionality and diversity.