The usage and difference of CSS3 animated transition and animation

Transition and animation are CSS3 new features that need to be added to the kernel when used

Browser	Kernel name
W3c
Ie	-ms-
Chrome/safari	-webkit-
Firefoc	-moz-
Opera	-o-

Difference:

Transition is an excessive attribute that requires the user to trigger , trigger time such as: Click, mouse hover, etc.

Animation is an animated property that does not require user triggering and is automatically executed when the page is loaded .

Use:

transation{Excessive attribute over time animation type delay Time}

-o-transation{Excessive attribute over time animation type delay Time}

-ms-transation{Excessive attribute over time animation type delay Time}

-moz-transation{Excessive attribute over time animation type delay Time}

-webkit-transation{Excessive attribute over time animation type delay Time}

@keyframes Animation Name {

0%{css Property List}

......

100%{css Property List}

}

@-o-keyframes Animation Name {

0%{css Property List}

......

100%{css Property List}

}

@-ms-keyframes Animation Name {

0%{css Property List}

......

100%{css Property List}

}

@-moz-keyframes Animation Name {

0%{css Property List}

......

100%{css Property List}

}

@-webkit-keyframes Animation Name {

0%{css Property List}

......

100%{css Property List}

}

div{

Animation: Animation name duration animation Type delay time loop whether reverse animation at the end of the state;

-o-animation: Animation name duration animation Type delay time loop whether reverse animation at the end of the state;

-ms-animation: Animation name duration animation Type delay time loop whether reverse animation at the end of the state;

-moz-animation: Animation name duration animation Type delay time loop whether reverse animation at the end of the state;

-webkit-animation: Animation name duration animation Type delay time loop whether reverse animation at the end of the state;

}

The usage and difference of CSS3 animated transition and animation