CSS3 Transform, Transition, and Animation attribute summary, css3transition

CSS3 Transform, Transition, and Animation attribute summary, css3transition

Three attributes related to deformation and animation in CSS3:

Transform

Browser support:

Internet Explorer 10, Firefox, and Opera support the transform attribute.

Internet Explorer 9 supports alternative-ms-transform attributes (only applicable to 2D conversions ).

Safari and Chrome support alternative-webkit-transform attributes (3D and 2D conversions ).

Opera only supports 2D conversion.

2D transform Transformation Method

Function	Description
Translate (x, y)	Define 2D conversions and move elements along the X and Y axes
Rotate (angle)	Defines 2D rotation and specifies the angle in Parameters
Scale (x, y)	Defines 2D scaling conversion and changes the width and height of elements.
Skew (x-angle, y-angle)	Defines 2D skew conversion along the X and Y axes
Matrix (n, n)	Defines 2D conversions using a matrix of six values

• The translate (x, y) method moves from the current element position based on the parameters specified at the left (x axis) and top (y axis) positions. The values of x and y can be positive and negative, respectively indicating the offset to different directions.
• The rotate (angle) method, indicating the angle of rotation. If angle is positive, it is rotated clockwise. If angle is negative, it is rotated counterclockwise.
• The scale (x, y) method indicates the scale ratio of the elements on the x and y axes. If the parameter is greater than 1, the elements are enlarged. If the parameter is smaller than 1, the elements are reduced.
• The skew (x-angle, y-angle) method is used to distort and change the line of an element. The first parameter is the horizontal distortion angle, and the second parameter is the vertical distortion angle. The second parameter is optional. If the second parameter is not set, the Y axis is 0deg.
• The matrix (n, n) method specifies a 2D transformation in the form of a transformation matrix containing six values. This attribute value uses a matrix involved in mathematics.

Transform-origin attributes

The transform method we mentioned above is transformed Based on the center of the element, that is, the base point of the element transformation is the center of the element by default. But sometimes we need to perform these operations on elements at different locations, so we can use transform-origin to change the base point position of the elements. This property can receive three parameters:

Transform-origin: x-axis y-axis z-axis;

• X-axis indicates the value in the horizontal direction. You can take the left and center right values of the character parameter or the percentage value. The 100th value corresponding to the character parameter value is left = 0%; center = 50%; right = 100%.
• Y-axis indicates the value in the vertical direction. You can also set the top, center, and bottom character values, or take the percentage value. The character parameter value corresponds to the top 0% character values; center = 50%; bottom = 100%.
• Z-axis, indicating where the view is placed on the Z axis, used for 3D deformation.

3D transform Transformation Method

Internet Explorer 10 and Firefox support 3D conversion.
Chrome and Safari must be prefixed with-webkit -.
Opera does not support 3D conversion (supports 2D conversion ).

3D transformations use the same attributes based on 2D transformations. 3D transformations in CSS3 mainly include the following functions:

• 3D displacement: 3D displacement in CSS3 mainly includes two functional functions: translateZ () and translate3d;
• 3D Rotation: 3D Rotation in CSS3 mainly includes four functions: rotateX (), rotateY (), rotateZ (), and rotate3d;
• 3D Scaling: In CSS3, 3D scaling mainly includes scaleZ () and scale3d () functions;
• 3D matrix: Like 2D deformation, 3D deformation in CSS3 also has a 3D Matrix Function matrix3d ().

There are also the following conversion attributes:

• Transform-style: Specifies how nested elements are displayed in 3D space.
• Perspective: Specifies the perspective effect of 3D elements.
• Perspective-origin: Specifies the bottom position of a 3D element.
• Backface-visibility: defines whether an element is visible when it is not facing the screen.

 

Currently, mainstream browsers are not very compatible with the transform 3d attributes. Interested readers can gain an in-depth understanding of this feature. Below we will introduce several common functional methods:

The rotateX () method is used to rotate the elements around the X axis of a given degree;
The rotateY () method is used to rotate the elements around the Y axis of a given degree;
The rotateZ () method revolves around an element that rotates on the Z axis at a given degree.

 

Transition

The transition of css3 in W3C standards is described as follows: "The transition of css allows the attribute value of css to smoothly transition 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 smoothly changing the CSS attribute value with an animation effect ."

The value of the transition attribute includes the following four values:

• Transition-property: Specifies which css attribute of the HTML element to perform transition gradient processing. This attribute can be a variety of standard css attributes such as color, width, and height.
• Transition-duration: specifies the duration of the attribute transition.
• Transition-timing-function: Specify the gradient speed:
  1. Slow: (gradually slowing down) default value. The Lag Function is equivalent to the besell curve (0.25, 0.1, 0.25, 1.0 );
  2. linear: (uniform speed). The linear function is equivalent to the besell curve (0.0, 0.0, 1.0, 1.0 );
  3. Inflow-in: (acceleration). The inflow-in function is equivalent to the besell curve (0.42, 0, 1.0, 1.0 );
  4. Forward-out: (slowing down). The forward-out function is equivalent to the besell curve (0, 0, 0.58, 1.0 );
  5. Slow-in-out: (acceleration and then deceleration). The slow-in-out function is equivalent to the besell curve (0.42, 0, 0.58, 1.0 );
  6. cubic-besuppliers: (this value allows you to customize a time curve.) The specific cubic-besuppliers curve. (X1, y1, x2, y2) four values are specific to the Point P1 and point P2 on the curve. All values must be in the [0, 1] region; otherwise, they are invalid.
• Transition-delay: Specifies the delay time, that is, how long it takes to start the transition process.

 

 

Browser compatibility

Internet Explorer 9 and earlier versions do not support the transition attribute.

Internet Explorer 10, Firefox, Opera, and Chrome support the transition attribute. Chrome 25 and earlier versions and Safari require the prefix-webkit -.

 

Animation

To use an animation, familiarize yourself with the syntax rules of keyframes and Keyframes: The name starts with "@ keyframes, followed by a pair of braces ({}) added to the animation name, which contains style rules for different time periods. Different key frames are represented by from (equivalent to 0%), to (equivalent to 100%), or percentage (recommended for Best Browser support ),

 

@ Keyframes is defined. To make it work, you must bind it to a selector Through animation. Otherwise, the animation will not have any effect. The attributes of animation are listed below:

Attribute	Description	Value
Animation	Short attributes of all animation properties, except the animation-play-state attribute
Animation-name	Required @ keyframes animation name
Animation-duration	Specifies the seconds or milliseconds that an animation takes to complete a cycle.	The default value is 0.
Animation-timing-function	Specifies the animation speed curve	The default value is "renew"
Animation-delay	Specifies when the animation starts.	The default value is 0.
Animation-iteration-count	Specifies the number of times an animation is played	The default value is 1 (infinite: Unlimited
Animation-direction	Specifies whether the animation is played reversely in the next cycle.	The default value is "normal" (reverse: reverse playback; alternate: odd positive playback, even reverse playback; alternate-reverse: Odd reverse playback, and even forward playback .)
Animation-play-state	Specifies whether the animation is running or paused	The default value is "running" (paused: Pause animation)

 

Browser compatibility

Internet Explorer 10, Firefox, and Opera support the @ keyframes rule and the animation attribute.

Chrome and Safari require the prefix-webkit -.

Note: Internet Explorer 9 and earlier versions do not support @ keyframe rules or the animation attribute.

 

The above content from: http://blog.csdn.net/u014607184/article/details/51801393