Hello readers ! In this blog i'll show how to use animation attribute in css3. By attribute you can replace animated gif images, Flash animations, and JavaScripts also.

Okay lets start Its have two part :- First we are describe the object animation duration , animation-timing-function and etc.

Second we describe frames (to using @keyframes) It means the specific distance of animation.

you can understand It to use below example -

CSS :-

div
{
width:100px;
height:100px;
background:#F3C;
animation:exampleAnimate1s;
position:absolute;
top:0px;
left:0px;
animation-iteration-count:infinite;
}
@keyframes exampleAnimate
{
0%   {background: red; left:100px; top:0px;}
50%  {background: blue; left:200px; top:0;}
100% {background: green; left:50px; top:0px;}
}

Animation attribute has some many other property and that are -

animation-name: AnyName;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;


@keyframes myfirst
{
from { height:400px }
to { height:700px }
}

Thank you ! I hope It will helps you.