CSS3 Transition property changes and animation animation similarity and different points

Below sake the effect of the 2 pictures.

Http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html

The first changes the effect of the transition property

The second one for animation animation effect

Have you seen the similarities and differences between them? Yes, they can all achieve simple animation effect, but transition change effect when the mouse leaves the end of the animation, it will continue to animate for a period of time and eventually return to the initial style of the element. Animation animation effect is not, when the mouse left it will immediately end the animation effect.

There is a little difference: transition attribute Change time point is not easy to control, can only see through the mouse or JS dynamically append class name to the CSS properties to transition changes. Animation animation can control the duration of change time, delay changes and so on.

CSS3 Transition property changes and animation animation similarity and different points