Hello All,

Here I am sharing some information about the animations through CSS3.

As we know animation is changing the style of an element. we can change the animation by changing the style of an element using css properties. When we talk about css3 animations we have to specify some keyframes for animations.

@keyframe:

When we specify some css inside a keyframe, it means animation changes from one style other at certain time. We have to bind animation to the element to get it work. Here is an example:

/* The animation code */
@keyframes start {
    from {background-color: #000;}
    to {background-color: #ddd;}
}

/* The element to apply the animation to */
div {
    width: 150px;
    height: 150px;
    background-color: blue;
    animation-name: start;
    animation-duration: 5s;
}

In the above example animation will starts with changing the colour of div from black to grey gradually and the time duration of animation will be 5 seconds. We have specified when the style will change by using the keywords "from" and "to" that represents 0% (start) and 100% (complete). The default value of animation-duration is 0. So we must specify some value in that. We can use percentage to define different intervals of animations:

/* The animation code */
@keyframes example {
    0%   {background-color: yellow;}
    25%  {background-color: red;}
    50%  {background-color: green;}
    100% {background-color: blue;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

It will change the background-color of the element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete.

Hope this will help you to understand the basic concept of animations in css3. :)