CSS3 transition and conversion, CSS3 transition Conversion

CSS3 transition and conversion, CSS3 transition Conversion
CSS3 transition and conversion 1. Transition

What is transition?In general, the transition is the effect of gradually changing from one style to another.

Transition attributes:

Attribute	Description	Css
Transition	Short attribute, used to set four transition attributes in one attribute	3
Transition-property	Specifies the name of the css attribute for the Application transition.	3
Transition-duration	Defines the time spent on the transition effect. The default value is 0.	3
Transition-timing-function	Specifies the time curve of the transition effect. The default value is "renew"	3
Transition-delay	Specifies when the transition effect starts. The default value is 0.	3

 

 

 

 

 

Transition: it is a short attribute used to set four transition attributes. Therefore, we only need to write this attribute when using it.

Transition-property: Specifies the attributes of the application transition effect (you can set a single attribute or write all attributes (all )). Always set this attribute; otherwise, ignore this attribute. (Just like you want to call your sweetheart, but you don't know the TA's mobile phone number. Can you call him ?)

Transition-duration: specifies the time required to complete the effect (measured in seconds or milliseconds ). This is also a required attribute (if not, it will not be executed because the default value is 0)

Transition-timing-function: Specifies the speed curve of the transition effect. The default value is "renew ". It has 6 character attributes:

Linear specifies the effect of the transition from the start to the end at the same speed.

Begin specifies the effect of the transition from a slow start to a slow end.

Transition-in specifies the transition effect starting at a slow speed

Transition-out specifies the effect of transition ended at a slow speed.

Transition-in-out specifies the transition effect starting and ending at a slow speed.

Cubic-bizr (n, n) defines their own values in the cubic-bezr function. It may be that the value range is0 ~ 1Between

Transition-delay: specifies when the transition effect starts, that is, the latency we often call.

Effect: After 0.6s, the transition effect is executed.

 

Code

1 <! DOCTYPE html> 2 2. Conversion
Conversion: Apply 2D or 3D conversion to elements. This attribute allows us to performRotate, scale, move, or tilt.
Attribute:
1. Conversion
Nooe is not converted
Matirx (n, n) defines the conversion, using a range array of six values
Matirx3d (n, n) defines 3d conversion using 16 4*4 Matrices
Two-dimensional matrix: matirx (n, n), which is used to reposition elements in the horizontal and vertical directions.
3D matrix: matirx (n, n), which is a repositioning element based on X, Y, and Z.
This attribute involves a matrix in mathematics. Here I just click it.
2. Move
Translate (x, y) defines 2d movement to move to left and right, up and down
Translate3d (x, y, z) defines 3d Movement, and x y z rotates in three directions.
The translate (x, y) plane moves, X is the x-axis square moves, is to the right, negative is to the left. Y is the Y axis, moving downward, and negative is the upward
　　　　　　　　　　　　
Translate3d (x, y, z) is the same as translate (x, y), but only one z axis is moved.
3. Zoom
Scale (x, y) defines 2d Scaling
Scale3d (x, y, z) defines 3d Scaling
4. Rotate
Rotate (x, y) defines 2d Rotation
Rotate3d (x, y, z) defines 3d Rotation
It's easy to scale and move. You can understand it literally.
　　
This is just an example for everyone. I didn't add a prefix as I said. I hope you can add a prefix when writing. Thank you !!