Analysis of CSS3 deformation, transition, animation and related attributes (reproduced)

First, deformation

transform: The element object can be rotated rotate, scaled scale, moved translate, tilted skew, matrix deformed.
Example:

transform:rotate (90deg) scale (1.5,0.8) translate (100px,50px) skew (45deg,45deg); /* Matrix Deformation */ matrix (<number>,<number>,<number>,<number>,<number>,<number>); /* Perspective */ Perspective (length);

transition: Excessive attributes

Transition: Excessive effect of CSS property name over effect when long speed effect of speed curve over effect start time;

transition:property duration timing-function delay; /* Example */ transition:1s Ease all;-webkit-tansition:1s ease all;-moz-transition:1s ease all;-o-transition:1s ease all;

rotate (): a two-dimensional space rotation element.

If the element sets the perspective value, the Rotate3d () can be used to achieve a three-dimensional internal rotation.

Rotatex (Angele) /* equivalent to Rotate3d (1,0,0,angle) specifies x-axis rotation within three dimensions */ Rotatey (Angele) /* equivalent to Rotate3d (0,1,0,angle) specifies a y-axis rotation within a three-dimensional space */ Rotatez (Angele) /* equivalent to Rotate3d (0,0,1,angle) specifies a z-axis rotation within a three-dimensional space */

Scale ()

ScaleX (<number>) /* scale elements only in the x-axis (horizontal direction) */ ScaleY (<number>) /* scale only in the y-axis (vertical direction) */ Scalez (<number>) /* scale only on the z-axis, provided that the element sets the pivot value */

translate ([,]): Move, is the amount of displacement.

TranslateX (<translation-value>); /* move only in the x-axis (horizontal direction) */ Translatey (<translation-value>); /* move only in the y-axis (vertical direction) */ Translatez (<translation-value>); /* move only on the z axis, provided that the element sets the pivot value */

skew (): Tilt

skewx (<angle>); /* tilt only on X-axis (horizontal) */ Skewy (<angle>); /* tilt only on the y-axis (vertical) */

Matrix (a,c,e,b,d,f): matrices deform, the values of C, e are represented by a sine or cosine value.

A: denotes ScaleX (); X-Axis Scaling
C:skewy (); Y-axis Tilt
E:skewx (); X-axis Tilt
B:scaley (); Y-Axis Scaling
D:translatex () x-axis movement
F:translatey () y-axis movement

Transform:matrix (<number>,<number>,<number>,<number>,<number>,<number>);

Perspective (): Perspective

. Wrap {    Perspective:1000px;} . Wrap. Child {    transform:Perspective (1000px);}

ii. Transition

transition-property: Excessive attributes

Transition-property:all; /* over-effects for all elements */ Transition-property:none; /* no element has excessive effect */ transition-property:ident; /* Specifies that CSS properties have excessive effects, such as width */

Transition-duration: Excessive time
Transition-delay: When the delay time is negative, the over action is displayed from that point in time and the previous action is truncated.
Transition-timing-function: Over effect, default ease.

transition-timing-function:ease;/*mitigation effect, equivalent to Cubic-bezier (0.25,0.1,0.25,1.0) function, both cubic Bezier*/transition-timing-function:linear;/*linear effect, equivalent to Cubic-bezier (0.0,0.0,1.0,1.0) function*/transition-timing-function:ease-in;/*fade effect, equivalent to Cubic-bezier (0.42,0,1.0,1.0) function*/transition-timing-function:ease-out;/*fade effect, equivalent to Cubic-bezier (0,0,0.58,1.0) function*/transition-timing-function:ease-in-out;/*fade fade effect, equivalent to Cubic-bezier (0.42,0,0.58,1.0) function*/Transition-timing-function:cubic-bezier;/*special cubic Bezier curve effect*/

Third, animation

animation-name: The animated name, which must be used in conjunction with the rule @keyframes, because the animation name is defined by @keyframes, if multiple attribute values are provided separated by commas.

@keyframes is equivalent to a namespace, followed by a noun, if the animation-name in class defines the corresponding name to perform the animation. When defining animations, you can use the keyword from and to directly, from one state to another.

. Animation_name{ Left:0;Top:100px;position:Absolute;-webkit-animation:0.5s 0.5s Ease infinite alternate;-moz-animation:0.5s 0.5s Ease infinite alternate;-webkit-animation-name:Demo;-moz-animation-name:Demo;}@-webkit-keyframes Demo{From{left:0;} to{ Left:400px;}}@-webkit-keyframes demo1{0%{left:0;}50%{ Left:200px;}100%{ Left:400px;}}

animation-duration: Animation time

animation-timing-function: Playback method, the value is as follows:

Ease: mitigation effect, equivalent to Cubic-bezier (0.25,0.1,0.25,1.0) function, both cubic Bezier.
Linear: Linear effect
Ease-in: Fade effect
Ease-out: Fade effect
Ease-in-out: Fade Fade effect
Step-start: Jumps immediately to the end of the animation state
Step-end: Keep the animation start state, to the end of the animation execution time, jump to the end of the animation immediately
Step ([, [Start | end]]?) : The first parameter number is the specified interval, that is, the animation is divided into N-step stage display, the second parameter defaults to end, set the last step state, start is the state at the end, end is the state at the beginning, if the setting and Animation-fill-mode effect conflict, The end state of the animation is set to Animation-fill-mode.
Cubic-bezier (,,,): Special cubic bell curve effect

animation-delay: Start playback time

Animation-iteration-count: Play count, infinite when value is infinite loop playback

animation-direction: Playback direction, value is:

Normal: Regular direction
Reverse: The animation runs in reverse, always in the same direction as normal
Alternate: Animation will cycle forward and reverse motion

Animation-fill-mode: Post-play status, value:

None: Default value, not set
Forwards: The state at which the animation ends after it finishes
Backwards: Returns the start state of the animation after the end
Both: After the end can follow the forwards and backwards two rules
Animation-play-state: Retrieves or sets the state of an object's animation, taking a value:
Running: Default, Motion
Paused: Pause

Iv. Association Properties

Transform-origin: The origin of the transformation, the reference point of the transform, which defaults to the center point of the element. There are two parameters, parameter one is the horizontal axis, parameter two is the ordinate.

Percentage: Specifies the coordinate value in percent, which can be negative
Length: Specifies the coordinate value with the lengths, which can be negative
Left center right: horizontal direction value
Top Center Bottom: Vertical direction values

perspective-prigin: The pivot origin, which defines the 3D element on the x-axis and the y-axis, allows to change the bottom position of the 3D element, when the attribute is defined, it is a child element of an element, a perspective, not the element itself.
Note: Using this property must be used in conjunction with the perspective property to affect only the elements of the 3D transformation.
Value: Percentage, length, left, center, right, top, center, bottom

backface-visibility: Hide the back of the content, the back is visible by default, the content of the inverted transform is still visible, and when Backface-visibility is set hidden, the content is hidden after rotation and the front face is no longer visible after rotation.
Value: Visible, hidden
Transform-style:3d rendering, set the embedded elements in 3D space how to render, there are two values:
Flat: All child elements are rendered in 2D plane
Preserve-3d: Preserve 3D space

Analysis of CSS3 deformation, transition, animation and related attributes (reproduced)