how to create animation in css

CSS3 Animation

Ease

Ease
In

Ease
Out

Ease
In Out

Linear

Custom

Awesome

CSS timing functions

transition:< transition-property >

                  < transition-duration >

                  < transition-timing-function >

                  < transition-delay >;

This css function used for the transition effects in the web page elements. This function working every browser with specific web-kit use before the transition. In this use transition effects on the element property like color, background color, height, width etc.

transition duration defines the elements transition completed time.

transition-timing-function is used the transition function like ease, ease-in ease-in-out, linear etc.

transition-delay is used for starting delay time of the elements transition.
There is some css timing function with the example:-

1. Ease:-

transition: all 1s ease;     //for all changes
transition: width 1s ease;   //only for width

2. Ease-in:-

transition: all 1s ease-in;     //for all changes
transition: width 1s ease-in;   //only for width

3. Ease-out:-

transition: all 1s ease-out;     //for all changes
transition: width 1s ease-out;   //only for width

4. Ease-in-out:-

transition: all 1s ease-in-out;     //for all changes
transition: width 1s ease-in-out;   //only for width

5. Linear:-

transition: all 1s linear;     //for all changes
transition: width 1s linear;   //only for width

6. Custom:-

transition: all 1s cubic-bezier(1.000, 0.835, 0.000, 0.945);     //for all changes
transition: width 1s cubic-bezier(1.000, 0.835, 0.000, 0.945);   //only for width

If you are using for all browser work this transition you can use web-kit for specific browsers, there are some web kit:-

1. Chrome:-

In the chrome browser is work simple write transition word in this not use any external web-kit for the running this css code. But in some older version use prefix -webkit-

Ex:- -webkit-transition:all 1s linear;

The -webkit-  prefix also used in the Safari and Opera

2.Edge / Internet Explorer:-

For the running transition on Edge and Microsoft Explorer use prefix into transition -ms-

Ex :- -ms-transition:all 1s linear;

3.Firefox:- 

For the Firefox browser use -moz- prefix.

Ex:- -moz-transition:all 1s linear;

4.Opera:-

For use use an another prefix -o-

Ex:- -moz-transition:all 1s linear;