Css3 animation module transform transition animation attribute explanation

First, let's take a look at the compatibility of various browsers.

	IE	Firefox	Safari	Chrome	Opera
CSS 2D Transform	No	3.5	3.2	2.0	10.5
CSS 3D Transform	No	No	4. * (MAC)	No	No
Transition	No	3.7	3.2	2.0	10.5
Animation	No	No	4.0	2.0	No

Transform

This is relatively simple. The two-dimensional transformation of the control element on the plane has three attributes:

1.RotateRotate (). The element is rotated clockwise or counterclockwise. If its value is positive, it indicates clockwise rotation. If its value is negative, it indicates clockwise rotation. The Unit is degree (DEG ). For example:

PS: the rotation attribute can achieve the common triangle tips effect. Rotate a square 45 degrees to ◆. Try it by yourself.

2.SkewSkew (x, y ). There are two parameters. The first parameter indicates the degree of Skew in the X axis direction, and the second parameter indicates the degree of Y axis. The main difference is that if the value of the x-axis is positive, it indicates clockwise skew. If it is negative, it indicates clockwise skew. The value of the Y-axis is just the opposite of that of the x-axis.

3.TranslationTranslate (x, y ). Translation is a method of locating elements by using the X and Y coordinate values (unit: Px). Note that this position is different from position. The position it references is itself, however, position references the parent level.

 Transform: Rotate (45deg );  /*  Rotate 45 degrees clockwise  */  Transform: Rotate (-45deg );  /*  Rotate 45 degrees counterclockwise  */  Transform: skew (30deg, 10deg );  /*  Returns 30 degrees of clockwise Skew in the X axis and 10 degrees of clockwise Skew in the Y axis.  */  Transform: translate (10px, 15px ); /*  Move 10px to the left and 15px down  */  /*  Multiple Transform settings can be written together and separated by spaces. For example, the preceding settings can be written as follows:  */  Transform: Rotate (45deg) skew (30deg, 10deg) Translate (10px, 15px) 

 Transition

The official explanation is "allow smooth transition of CSS attribute values within a certain period of time. This effect can be triggered by mouse clicking, getting focus, being clicked, or making any changes to the element, and changing the CSS attribute value with a smooth animation effect ". For example, the original background is # fff and the hover is #000. If transition is used, it is to smoothly transition from # fff to #000 (use your imagination to think about it ).

Transition can be divided into four attributes:

1.Transtion-PropertyIt is used to specify which attribute values change to display the transition animation effect. None indicates none, all indicates all, or use commas to separate the attributes to be specified, such as transition-property: Background, width, height.

2.Transition-DurationSpecifies the animation duration. You can set multiple values separated by commas (,). Each value corresponds to each attribute set by transition-perproty. For example:

 

 
Transition-perproty: width, height; transition-Duration: 1 s, 0.5 s/*The duration of the width conversion animation is 1 S, and the duration of the Height Conversion animation is 0.5 s.*/
 

 

3.Transition-timing-FunctionIt indicates the effect of converting an animation. You can select multiple values:

1)LinearSpecify a linear gradient

2)BytesSpecifies a gradually slow animation.

3)Callback-inSpecifies a gradient animation that is slow first and then fast.

4)Timed-outSpecify a gradient animation that is fast and slow

5)Memory-in-outSpecifies a gradient animation that is slow first and then fast.

6)Cubic-bezeiserUse the besell curve to specify a complex animated gradient effect (this effect is good, you can do more complex effects, with a production effect site: http://matthewlein.com/ceaser)

4.Transtion-DelaySpecifies the waiting time before the animation starts. If this parameter is not required, it can be omitted.

Animation

Animation is closer to the meaning of an animation than transition. You can set the effects of multiple frames for the animation, and then combine and transform these frames to display them according to the animation effect. There are six attributes. Before learning about its attributes, you must first familiarize yourself with the key frame keyframes attribute.

KeyframesLiterally, keyframes indicates the meaning of a key frame. This concept also exists in flash. We can think of a GIF animation consisting of a frame and a frame. In css3, keyframes is used to describe the effect of the first frame, and animation is used to describe how each frame is combined and its effect. The format is as follows:

 

 @ Keyframes: animation identifier { /*  The animation identifier will be referenced by the animation-name attribute. */     /*  The animation effect of each frame can be defined by adding a percentage value and a style.  */  0% {background-color : White ;} 50% { Background-color : Red ;} 100% { Background-color : Black ;} }
 /*  We can regard the percentage value as the position of the first frame in the timeline of the animation. 0% is at the beginning of the timeline, 50% is in the middle of the timeline, and 100% is at the end of the timeline. The above animation effect is that the background color of the element changes from white to red, and then from red to black. 0% and 100% can also be replaced by form and.  */
  @ Keyframes: animation identifier {  From {background-color : White ;} 50% { Background-color : Red ;} To { Background-color :Black ;} }
 

Attribute:

1.Animation-nameThis attribute specifies the keyframes for the animation. For example, if the animation-name is set to loading, the animation corresponds to the Key Frame declared by @ keyframes loading. If no key frame is defined, the animation will not take effect.

2.Animation-DurationDefines the duration of an animation. The default value is 0.

3.Animation-DelayDefines the time from triggering to starting an animation.

4.Animation-timing-FunctionDefine the animation display effect, such as fast first, slow first, and fast. The attribute value is the same as that of transition-timing-function.

5.Animation-iteration-countThis attribute defines the number of animation cycles. The default value is 1. We can use infinite to make the animation infinite loop, which is not supported by the transition animation.

6.Animation-directionSpecifies the playback direction of an animation. The default value is normal, indicating that each animation is played forward. The other value is alternate. the even number of animations is played forward, and the odd number is played backward.

 

When writing the preceding attributes, you must add the prefix-WebKit-,-o-,-MS-,-moz-based on different browsers-

Additional links:

Http://www.w3cplus.com/content/css3-transform (Transform)

Http://www.cnblogs.com/lianjun/archive/2011/09/30/2196912.html (Transition)

Http://www.cnblogs.com/lianjun/archive/2011/10/07/2200315.html (animations)