On the difference analysis of animation properties transform and Transition and animation attributes in CSS3

This article mainly introduces the CSS3 of animation properties transform and Transition and the animation attribute of the difference analysis, has a certain reference value, now share to everyone, the need for friends can refer to

The animated properties in CSS3 have recently been used in the project. Helpless for CSS3 a few new attributes not too familiar with, often easy to confuse. So from the site to study the point of information, summed up, to facilitate the needs of friends can 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 (including me) 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 to which the CSS is acting is 0, which is to be calculated (pending study). 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:

. 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 I was writing the CSS, because the properties of the change were only transform one, I specified the Response property as all in the Transtion property, and could respond to and execute the animation of the change of all the attributes of the element (properties that can animate).

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:

@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.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!