Building Web Animation With The All New CSS3

This article stresses the wonders of creating animation with the new CSS3. Facts about how to craft computer web graphics is presented with some application.

In today’s arena, building a modern, and eye-catching website makes it very appealing to viewers thus increasing popularity on site.With CSS3 animation, there is no better moment to give it a try. CSS3 animation makes it possible to animate elements from one style to another. It is part of the proposed modularized approach of CSS3 that provides special effects to any extended markup language supported by a browser. 2D/3D animation, regardless of its technicalities, CSS3 follows the same basic concept that is easy to remember and fun to learn with.

Keyframe Rule

Keyframe rule is the fundamental component of CSS3 animation for without it no animation will take place. In simpler terms, Keyframe rule is where the animation is crafted. Specifying Keyframe Rules with its several properties makes the animation unique and configured. Keyframes rules vary in each browser. They are identified by using prefixes before the keyframe. For example prefix -webkit- for Chrome and Safari, prefix -moz- for firefox, and prefix o- for Opera users. Keyframe rule consists of the following: keyword “@keyframes”, followed by the animation-name, then by a set of style rules (delimited by curly braces). To give a clear picture, the rule will look like this:

@keyframes myfirst


from {background: red;}

to {background: yellow;}


Animation Properties

CSS3 animation generally consists of two things: an element of styles and a Keyframe. The former makes up the properties of an animation while the latter describes the CSS animation per se. Several of these animation properties must be included to make up a keyframe. Therefore terms of such properties must be familiarized in order to proceed into much detailed information.

  • animation-iteration-count – specifies the number of times the animation should repeat.
  • animation-direction – Configures the elements direction whether in reverse or on alternate series
  • animation-duration – Configures the length of time an animation is to be completed
  • animation-delay – it is the delay of time from the time an element is loaded up to the start of animation
  • animation-name – gives identification to @keyframes that should match with the keyframe rule or else no animation will take place
  • animation-play-state – Lets you pause and resume the animation sequence.
  • animation-timing-function – describes how the graphics will develop over one cycle of its duration.

Application of Animations

Let’s set up the above mentioned concepts into practice. For CSS animation to work, you need to attach an animation code to an element. Here’s how:

/*This is the animation code right here. */

@-webkit-keyframes example {

from {transforms: scale(2.0);}

to {transform: scale(1.0);}


/*This is the element where we apply the animation. */

Div {

-webkit-animation-name: name;

-webkit-animation-duration: 1s;

-webkit-animation-timing-function: ease /*ease is the default*/

-webkit-animation-delay: 1s; /*0 is the default*/

-webkit-animation-iteration-count: 2; /*1 is the default*/

-webkit-animation-direction: alternate; /*normal is the default*/



First, we have the animation code located on the upper part of the box. The relevance of this code helps the element perform such animation. The code utilizes the keyframe rule. This can appear anywhere in the CSS, for as long as the element that you’re animating can detect the applicable animation-name.