Creating Animations using CSS3

This is the era of Internet and Technologies where every day you could find a new development. CSS3 is a mind blowing development in the field of web designing. This is not only a technology but a platform from where any designer, weather fresher or experienced could touch the sky. Its so simple and results are so impressing that you could even forget flash. The design era in the web designing sector was firstly captured by flash and it remain there for a decade, but now JQUERY, HTML5 and CSS3 have changed the scenarios. They are so light in size that they could easily load in the web browser and the results are awesome. Here, I am discussing a small example as how to easily create animations using CSS3.

#anim
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}

I have created an id with the name anim. The basic CSS you can understand if you are a web designer or a fresher even in the IT sector. I will describe the CSS3 properties. animation-name is the name that is given to the animation. You will come to know, further in the tutorial how it will work. animation-duration specifies the seconds for which your animation will play. animation-timing-function tells the behavior of the animation, it could be liner, ease, ease-in, ease-out. animation-delay specifies the time in seconds between consecutive iterations of the animation. animation-iteration-count specifies the no of times animation will play. IF you want it to play all the time then specify it infinite. animation-direction tells the direction in which animation should play. It can be normal or alternate. animation-play-state specifies the state of the animation when the page gets loaded. This is the description of the CSS3 for the id anim. Moving on further, I want to explain the @keyframes CSS at rules. These are certain set of rules that can be used to develop the animations.

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

Here @keyframes is the syntax and myfirst is the name of the animation that we have specified in the CSS property. Coming to the description of the rules. The @keyframes rule set provides you the facility to give different animations at different time intervals of the animation. In this example I have divided the animation into four sections. At 0% i.e. when the animation starts the css given will be applied till 25% of the animation is complete and the css given at 25% will be applicable till 50% and so on. When you apply this in your code you will find something like below.