The difference between CSS3 animation effect and simple animation of company frame

First look at the effect of the site

http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/

The animation effect of the station is achieved by mixing the simple animation and CSS3 animation in 2 ways.

First, the characteristics and differences,

1. Simple animation directly by appending the class class name and the attribute parameter to the DOM element

Like this

Implementation principle: Is the change of the animate animation of jquery, in order to achieve the control elements of the CSS style to achieve animation effect.

2.CSS3 Animation (this reference code)

The principle of implementation: mainly through the CSS key frame in different time periods to change the style properties of the control to achieve animation effect.

3.transform do CSS3 animation effect, the page cut version to be added directly after the next (because it has been set positioning), do not change the previous position property has the final position attribute.

Take the first car from the outside of the page to fly to the page as an example:

If easy animation is applied, first set the left property of the car to left:-200px, and then set the left to 0 in a certain amount of time to enter the page. We are in the cut version of the time is set up left:0;

Now in order to add animation effect, you need to set the car initial value left to -2000px in the style sheet, and finally set to 0, has achieved a simple fly into the animation effect.

If the animation effect is made by CSS3 's transform, the angle of our cut will not affect the final attribute value of the original element position (POSITION:ABSOLUTE;LEFT:XXPX;TOP:XXPX;).

The position change effect of the simple animation is that the position property value of the element is changed at all times

The animation effect of the simple animation adds a little more trouble. Because the starting position property is to be changed, the final position property value is the Position property value after the page is cut.

4. Applicability: Easy to use animation and PC-side mobile can be. CSS3 animations are incompatible with ie7,8.

The difference between CSS3 animation effect and simple animation of company frame