CSS3 four-attribute parsing (transformations, transitions, animations, associations)

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 Warp */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 the x-axis rotation */rotatey (angele)/* equivalent to Rotate3d (0,1,0,angle) in three-dimensional space to specify the y-axis rotation within three-dimensional space */rotatez (Angele)/* equivalent to Rotate3d (0,0,1,angle) specifies the z-axis rotation in three-dimensional space */

Scale ()

ScaleX (<number>)/* Only scales elements in the x-axis (horizontal direction) */scaley (<number>)///only in the y-axis (vertical) */scalez (<number>)/* Only in the z-axis scaling, Prerequisite: Element Set Pivot value */

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

TranslateX (<translation-value>);/* Move */translatey (<translation-value>) only on the x-axis (horizontal);/* Move only on the y-axis (vertical) */ Translatez (<translation-value>);/* Only moves on the z axis, provided that the element sets the pivot value */

skew (): Tilt

Skewx (<angle>);/* */skewy (<angle>) only at x-axis (horizontal);/* tilt only on 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;/* has an over-effect on all elements */transition-property:none;/* no elements are overly effective */transition-property:ident;/* Specifies that the CSS property has 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