Explain animation in CSS3

One of the coolest property of CSS3 is animations. You can create an animation with only a CSS to your file. Since animation is like a series of frames, you will have to specify properties of different frames at different times. For each frame, you will have to specify the animation name, duration. Then in the animation name you will have to specify the from and to values of each property that you want to change. For ex:

div {
 width: 50px;
 height: 50px;
 background-color: #d8d8d8;
 animation-name: animateDiv;
 animation-duration: 4s;
}

@keyframes animateDiv {
 from {background-color: #d8d8d8; }
 to {background-color: #d0d0d0; }
 from {width: 50px; }
 to {width: 150px; }
 from {height: 50px; }
 to {height: 100px; }
}

In the above example, we specified animation-name & animation-duration in the div section. Animation-name is animateDiv, for which we specify from and to values of different properties. All the from to to values will take effect for the properties within 4s. If you don't want to change the animation from just one value to second value, you can specify the change to take place at specific percent. If you specify 10%{height: 10px;}, 20%(height: 20px} then height will change to 10px at 10% of animation-duration, 20px at 20% of animation-duration. For ex:

@keyframes animateDev {
 0% {height: 10px}
 20% {height: 20px}
 40% {height: 30px}
 60% {height: 40px}
 80% {height: 50px}
 100% {height: 60px}
}

In the above example, the height changes to 10px at 0% of animation-duration, to 20px at 20%, and so on


Animation Delay:
It will start the animation at a specified delay. It is specified as animation-delay: value; For ex:

div {
 animation-delay: 2s;
}

Animation Iteration:
Sometimes you don't want to run an animation only once, you might want to run it a lot of times. In that case, you can specify the iteration-count. And if you want to run an animation forever, you just need to specify the value to infinite. You specify the property and value as animation-iteration-count: infinite For ex:

div {
 animation-iteration-count: 3;
}

OR 

div {
 animation-iteration-count: infinite;
}

Animation Direction:
You can run the animation in reverse or alternate cycle manner. You specify it as animation-direction: reverse; or animation-direction: alternate. If you specify alternate direction, then the animation will run in clockwise and anti-clockwise direction on alternate iterations. For ex:

div {
 animation-direction: reverse;
}