CSS3 examples of the differences between transform, transition and Animationsan three attributes

The animated properties in CSS3 have recently been used in the project. Often easy to confuse. So from the Internet to check a bit of information, summed up, convenient for friends who need to refer to learning.

Transform
In part of the test case, the transform properties are often shown as if they were driven. This makes a small number of intuitive thinking people think that the Transform property is an animated property. On the contrary, the Transform property is a static property that, once written into a style, will be directly displayed, without any change in process. Transform's main use is to do the special deformation of the elements, for the design of the person is not very unfamiliar, the simple is the CSS graphics deformation tool.

The origin setting in the underlying condition of the graphic deformation is defined by the transform-origin used in the CSS. The origin of this definition should be the upper-left corner of the element that the CSS is acting on is 0, calculated by zero. Other properties are calculated based on this property.

The pattern of graphic changes is defined by the CSS3 standard Transform-style. The default is flat, which shows a simple effect. The preserve-3d, in turn, renders the space as 3d mode. From the normal thinking, should only need to preserve-3d, but from the rumor "opened perserve-3d on the use of GPU acceleration", this property may be to reduce the system consumption, after all, 3d than 2d to one dimension of the calculation.

If you need to use 3d mode, you must first specify a style of 3d and add perspective and perspective-origin on any parent element to specify the pivot point.

Specific to the designer to change the style of the elements with the following five properties:

1, Translate3d (x, Y, z) is used to control the position of the element on the page of the three-axis position;
2, rotate (deg) is used to control the angle of rotation of the element;
3, Skew[x,y] (deg) This property is used to make the tilt, the design of the person may know that this is used to create a 3d perspective in the 2d when the necessary properties;
4. Scale3d (x, Y, z) is used to enlarge and reduce the effect, the attribute is the ratio;
5, Matrix3d,css Matrix. With this matrix attribute, all of the above attribute values are covered, but the individual feels that the readability is very poor (all numbers and units, the back is a little blurry), there is no reason to recommend the use.

Overall it seems that the properties of CSS transform and the original use of left, right, top, bottom of the properties from the static and dynamic point of view there is no difference, so when using the transform should be classified into this kind of positional deformation static properties inside.

Transition
The Transition property is a simple animated property that is very simple and very easy to use. It can be said that it is a simplified version of animation, is to do simple Web page effects for ordinary use. For example, you have the following two styles:

The code is as follows:

. position{    left:100px;    top:100px;}. animate{    -webkit-transition:left 0.5s ease-out;    left:500px;    top:500px;}

Where Animate's transition property means that when your left property changes, the animation is performed (based only on left property changes, other properties are not added to the animation changes);

First of all, your element's CSS is position. When you add its csslist to animate or replace position as animate, the element's attribute changes, triggering webkit-transition to specify the value before the property changes to the starting value, the changed attribute as the ending value, and the animation effect. This is a simple two-point change process that greatly simplifies the complexity of the animation attribute.

Also, if the property value changes in the transition animation, the current animation execution is interrupted, and the value of the attribute at break is provided to the new animation as the starting value to calculate the new animation effect.

When the CSS is written, because the properties of the change only transform one, so in the Transtion property to specify that the response property is all, you can respond to and execute the change of all attributes of the element animation (can animate properties).

Animation
Introducing this attribute on the official introduction is an extension of the transition property. But this simple introduction contains something that is not simple: keyframes.

People who have done flash animations will know that there are two basic weapons in Flash: the Timeline and keyframes. The advent of CSS keyframes is to provide a collection of these two properties in the Flash world. See an example of a simple keyframes:

The code is as follows:

@keyframes ' wobble ' {  0%{   left:100px}   30%{   left:300px;}  100%{   left:500px;}}. animate{left:100px;   -webkit-animation:wobble 0.5s ease-out;   -webkit-animation-fill-mode:backwards;}

The above code shows a keyframes ' wobble ', where 0% represents the attribute value at different points in the change, and you can control the effect of the attribute at any point in the animation change more precisely. Animation, however, calculates the attributes in the element animation based on the property changes provided by this keyframes. Unlike transition, KeyFrames provides more control, especially the control of the time axis, which makes the CSS animation more powerful, making the part of the animation effect of the flash can be directly controlled by the CSS, which only requires a few lines of code, It also created a large number of CSS-based animation tools that replace the animated parts of Flash. For animation tools, you can refer to Web standards-based Animation tools.

Another important thing in the animation attribute is the Animation-fill-mode, which indicates whether the style specified in (from/0%) or the style specified in (to/100%) is the style after the animation is completed. This is convenient. We control the end of the animation style, to ensure the overall coherence of the animation.