Animation with CSS3

After transforming objects in CSS we are now ready to learn animation. In CSS3, different properties of an object(An HTML element) can be animated by using animation property. There are different sub-properties of animation for specifying animation duration, animation name, animation delay, animation direction etc. For defining animation we use @keyframes rule. The rule describes how the element shall render at a given time in the animation sequence.  Lets check a simple code-

First, lets create a div with a header inside to name it.
<div id=”rotate”><h1>This is test</h1></div>

Next, will create a CSS rule for this div element and define the animation name and its duration.
div#rotate{
animation: rotateMe 1s;
-webkit-animation: rotateMe 1s;
width:200px;
height:100px;

background:yellow;
animation-timing-function:ease;
-webkit-animation-timing-function:ease;
}

We are specifying the animation properties with its name as rotateMe and of the duration of one second for webkit browsers. Then we have specified the height, width and background color, then in the last two lines we have defined the acceleration of the animation.

We have to define keyframes for this animation to work.

@keyframes changeColor
{
from{ transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
}
@-webkit-keyframes changeColor{
from { transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg),;-webkit-transform:rotateZ(360deg);}
}

We have specified the name of the animation as change Color which we have defined in the rotate id. Then we have specified the properties to animate with their start and end values, i.e. we are rotating the element along z-axis from 0 to 360 degree which is complete rotation. Here is the complete demo.

Leave a Reply

Your email address will not be published. Required fields are marked *