Principles of CSS3 Animation

What is CSS3 Animation

CSS3 animation is a great new feature. CSS3 animation can be used to really bring a website to life and it can make the website more attractive. CSS animation can bring much-needed interaction to your elements; it can add excitement to the page; and in combination with JavaScript, it can even be an alternative way to animate for games.

In this article, we will take our first steps with CSS3 animation and consider the main guidelines for creating animation with CSS. CSS3 animation now supported in both Firefox and Webkit browsers. Here We’ll to analyse the building up of animation using CSS3.

CSS3 Animation Properties

Animation is a new CSS (CSS3) property that allows for animation of most HTML elements without JavaScript or Flash. Presently, it’s supported in Webkit browsers, including Safari 4+, Safari for iOS (iOS 2+), Chrome 1+ and, more recently, Firefox 5. Unsupported browsers will simply ignore your animation code, so ensure that your page doesn’t rely on it!

Because the technology is still relatively new, prefixes for the browser vendors are required. So far, the syntax is exactly the same for each browser, with only a prefix change required. In the code examples below, we use the -webkit syntax.

Here we can see basic example for CSS3 animation. What we need to do to get some CSS3 animation happening is to attach an animation to an element in the CSS.

/*CSS3 animation animation code. */
@-webkit-keyframes example {
   from { transform: scale(2.0); }
   to   { transform: scale(1.0); }
}

/* apply animation to Div element. */
div {
   -webkit-animation-name: example;
   -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 */
}

Keyframe property is used for adding different events for the time frame.
The above can be written in short form as follows.

div {
-webkit-animation: example 1s ease 1s 2 alternate;
}

Different effects we can add using CSS3 animation properties. We can apply squash and stretch effect through a CSS3 property, transform:

@-webkit-keyframes example {
   0% { -webkit-transform: scaleY(1.0); }
   50% { -webkit-transform: scaleY(1.2); }
   100% { -webkit-transform: scaleY(1.0); }
}

This will scale the object lengthwise (on the y axis, up and down) to 1.2 times the original size, and then revert to the original size.

We can also use more complex timing for animations. You can use ‘from’ and ‘to’ for basic animations. But you can also specify many actions for your animation using percentages.

50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}

That covers the squashing. Now we need to move the object using translate. We can combine transforms together.

The translate property allows us to manipulate the object without changing any of its base properties (such as position, width or height), which makes it ideal for CSS animation.

You can use animation-delay to create anticipation or adjusting the animation timing.

div {
-webkit-animation-delay: 1s;
}

The following css properties also we have to consider or we should have knowledge about these, while making CSS3 animation.

-webkit-animation-timing-function property takes the following values:
ease-inSlow at the beginning, and then speeds up.
ease-outFast at the beginning, and then slows to a stop.
ease-in-outStarts slow, speeds up in the middle, and then slows to a stop.
linearMoves at an even speed from start to finish.
You can also use the bezier-curve function to create your own easing speeds.

So, proper understanding of the CSS3 animation properties will help us to make our websites more lively.