Summary of CSS3 Transform, Transition and Animation properties

Three properties of CSS3 related to deformation and animation ##：

Trans

form

Browser support:

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

Internet Explorer 9 supports the alternative -ms-transform attribute (only for 2D transformations)

Safari and

Chr

ome support. Alternative -webkit-transform property (3D and 2D transforms) Opera only supports 2D transforms

##Function

Description##translate(x,y)Define 2D transformation, move elements along the X and Y axesrotate(angle)Define 2D rotation, specify the angle in the parametersscale(x,y)Define 2D scaling transformation, change the width and height of the elementskew(x-angle,y-angle )Define 2D tilt transformation, along the X and Y axes##matrix(n,n,n,n,n,n)

• The translate(x, y) method moves from the current element position according to the parameters given by the left (X-axis) and top (Y-axis) positions. The values ​​of x and y can be positive or negative, which respectively represent offsets in different directions.

• rotate(angle) method represents the angle of rotation. When angle is positive, the element rotates clockwise; when it is negative, the element rotates counterclockwise.

• scale(x, y) method indicates the scaling ratio of the element on the x-axis and y-axis. When the parameter is greater than 1, the element is enlarged; when it is less than 1, the element is reduced.

• skew(x-angle,y-angle) method is used to distort elements. The first parameter is the horizontal distortion angle, and the second parameter is the vertical direction. Twist angle. The second parameter is an optional parameter. If the second parameter is not set, the Y axis is 0deg

• matrix(n,n,n,n,n,n) method , specify a 2D transformation in the form of a transformation matrix containing six values. This attribute value uses the matrix

transform-origin involved in mathematics. Attribute

The transform methods we mentioned earlier are all 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 positions, then we can use transform-origin to change the base position of the element. This attribute can receive three parameters:

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

• x-axis, indicating the horizontal direction. The value can be the character parameter value left, center right, or the percentage. The corresponding percentage value of the character parameter value is left=0%; center=50%; right=100%.

• y-axis, indicating the value in the vertical direction, you can also set the character value top, center, bottom, or Take the percentage. The percentage values ​​corresponding to the character parameter values ​​are top=0%; center=50%; bottom=100%.

• z-axis, indicating where the view is placed on the Z axis, used in 3D deformation.

3D transform transformation method

Internet Explorer 10 and Firefox support 3D transformation.
Chrome and Safari must add the prefix -webkit-.
Opera does not yet support 3D transformations (2D transformations are supported).

Three-dimensional transformations use the same properties based on two-dimensional transformations. 3D transformation in CSS3 mainly includes the following functional functions:

• 3D displacement: 3D displacement in CSS3 mainly includes translateZ() and translate3d() Functional functions;

• 3D rotation: 3D rotation in CSS3 mainly includes four functional functions: rotateX(), rotateY(), rotateZ() and rotate3d();

• 3D scaling: 3D scaling in CSS3 mainly includes two functional functions: scaleZ() and scale3d();

• 3D matrix: 3D deformation neutralization in CSS3 2D deformation also has a 3D matrix function function matrix3d().

There are also the following transformation 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 the 3D element.

• backface-visibility: Defines whether the element is visible when not facing the screen.

Currently, the compatibility of the transform 3d attribute in major mainstream browsers is not particularly good. Interested readers can learn more about it on their own. Below we introduce several commonly used functional methods:

rotateX() method, rotate the element around the X axis at a given degree;
rotateY() method, rotate it around the Y axis at a given degree Axis-rotated element;
rotateZ() method, rotates an element around its Z-axis at a given degree.

Transition

W3CThe transition of css3 is described in the standard like this: "The transition of css allows css The attribute value transitions smoothly within a certain time interval. This effect can be triggered by mouse click, focus, click, or any change to the element, and smoothly changes the CSS attribute value with animation effect.”## The value of the

#transition attribute includes the following four:

• transition-property: Specifies which css attribute of the

  HTML element is used for transition gradient processing , this attribute can be various standard css attributes such as color, width, height, etc.

• transition-duration: Specifies the duration of attribute transition

• transition-timing-function: Specify the speed of the gradient:
  1. ease: (gradually slows down) default value, the ease function is equivalent to the Bezier curve (0.25, 0.1, 0.25, 1.0);
  2. linear: (uniform speed), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0);
  3. ease-in: (acceleration), the ease-in function is equivalent to To the Bezier curve (0.42, 0, 1.0, 1.0);
  4. ease-out: (deceleration), the ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0);
  # 5. ease-in-out: (accelerate and then decelerate), the ease-in-out function is equivalent to the Bezier curve (0.42, 0, 0.58, 1.0);
  6. cubic-bezier: (this value allows You can customize a time curve), a specific cubic-bezier curve. The four values ​​(x1, y1, x2, y2) are specific to points P1 and P2 on the curve. All values ​​must be within the [0, 1] range, otherwise they will be invalid.

• transition-delay: Specify the delay time, that is, how long it takes to start the transition process.

Browser Compatibility

Internet Explorer 9 and earlier version, the transition attribute is not supported.

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

Animation

To use animation animation, you must first familiarize yourself with keyframes and the grammatical rules of Keyframes: naming is It starts with "@keyframes", followed by the "name of the animation" plus a pair of curly brackets "{}". In the brackets are some style rules for different time periods. Different keyframes are expressed by from (equivalent to 0%), to (equivalent to 100%) or percentage (in order to get the best browser support, it is recommended to use percentage),

@keyframes is defined. To make it work, it must be bound to a selector through animation, otherwise the animation will have no effect. The attributes of animation are listed below:

Define the 2D transformation using a matrix of six values

##animation-iteration-Specifies the number of times the animation is playedThe default is 1 (infinite: unlimited timesanimation- Specifies whether the animation will be played in reverse in the next cycle The default is "normal" (reverse: play in reverse; alternate: play forward in odd numbers, play in reverse in even numbers; alternate -reverse: Play in the reverse direction for odd times, and play forward for even times)##animation-play-stateThe default is "running" (paused: paused animation)

Attribute	Description	Value
animation	Abbreviated attribute for all animation attributes, except animation-play-state attribute
animation-name	Specifies the name of @keyframes animation
animation-duration	Specifies the seconds or milliseconds it takes for the animation to complete a cycle	The default is 0
animation-timing-function	Specifies the speed curve of the animation	The default is "ease"
animation-delay	Specifies when the animation starts	The default is 0
count
direction
Specifies whether the animation is running or paused

##Browse Server compatibility

##Internet Explorer 10, Firefox and Opera support @keyframes rules and animation attributes Chrome and Safari require the prefix -webkit-

Note: Internet Explorer 9, and earlier versions, do not support @keyframe rules or animation attributes

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

The above is the detailed content of Summary of CSS3 Transform, Transition and Animation properties. For more information, please follow other related articles on the PHP Chinese website!