A brief introduction to transformations and transitions, animations and associated properties in CSS3

1. Transform

transform: You can rotate rotate, scale, move translate, tilt skew, and matrix deform matrix on element objects.
Example:

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);

transition: Transition attribute

transition: css attribute name of transition effect Transition effect duration Speed ​​curve of speed effect Transition effect start time;

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

rotate(): Rotate elements in two-dimensional space.

If the element has a perspective value set, rotate3d() can be used to achieve rotation in three-dimensional space.

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

scale()

scaleX(<number>)/*只在X轴（水平方向）缩放元素*/
scaleY(<number>)/*只在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/

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

translateX(<translation-value>);/*只在X轴（水平方向）移动*/
translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/

skew()：skew

skewX(<angle>);/*只在X轴（水平）倾斜*/
skewY(<angle>);/*只在Y轴（垂直）倾斜*/

matrix(a,c,e,b,d,f)：matrix deformation, c , the value of e is represented by sine or cosine value.

a: represents scaleX(); X-axis scaling
c: skewY(); Y-axis tilt
e: skewX(); X-axis tilt
b: scaleY(); Y Axis scaling
d：translateX()

##transition-property

: transition property

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

transition-duration: transition time transition-delay: delay time, when it is a negative number, transition action It will be displayed starting from this point in time, and the previous actions will be truncated.

Transition-timing-function: transition effect, default ease.

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

3. Animation

animation-name

: animation name, must be used in conjunction with the rule @keyframes, because the animation name is defined by @keyframes , if multiple attribute values ​​are provided, separate them with commas.

@keyframes

is equivalent to a namespace, followed by a noun. If the animation-name in the class defines the corresponding name, the animation can be executed. When defining animation, you can directly use the keywords from and to to transition from one state to another.

transition-property:all;/*针对所有元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果，例如width*/

animation-duration: Animation time

animation-timing-function

: Playback method, the values ​​are as follows:

ease: Ease effect, equivalent to cubic-bezier(0.25,0.1,0.25,1.0) function, that is, cubic Bezier. linear：linear effect

ease-in：fading effect

ease-out：fading effectease-in-out：fading effectstep-start：jump immediately Go to the end state of the animation

step-end: Keep the start state of the animation. When the animation execution time is over, jump to the end state of the animation immediately

step([,[start | end]]?): The first parameter number is the specified number of intervals, that is, the animation is divided into n steps for phased display. The second parameter defaults to end, which sets the last step state. start is the state at the end, and end is the state at the beginning. If set with animation- The effect of fill-mode conflicts, and the setting of animation-fill-mode is the animation end state.
cubic-bezier(,,,): Special cubic zebel curve effect


animation-delay
: Start playback time


animation-iteration -count

: The number of playback times, when the value is infinite, it means infinite loop playback

animation-direction

: The playback direction, the value is:

normal: normal Direction reverse: The animation runs in reverse, and the direction is always similar to normal

alternate: The animation will cycle forward and reverse alternately

animation-fill-mode

: The state after playback , Value:

none: Default value, not set
forwards: Keep the state where the animation ends after the end

backwards: Return to the state when the animation starts after the end

both: Can be followed after the end Two rules for forwards and backwards animation-play-state: Retrieve or set the state of the object animation, value: running: default, motion

paused: paused

four , Associated attributes



transform-origin

: Transformation origin, reference point of transform, defaults to the center point of the element. There are two parameters, parameter one is the abscissa, and parameter two is the ordinate.

Percentage: Use percentage to specify coordinate value, can be negative length: Use length to specify coordinate value, can be negative

left center right: Take the value in the horizontal direction

top center bottom: Take the value in the vertical direction Value

perspective-prigin

: Perspective origin, defined on the X-axis and Y-axis of the 3D element, allowing the bottom position of the 3D element to be changed. When this attribute is defined, it is a child of an element The element, the perspective, not the element itself.
Note: This attribute must be used together with the perspective attribute, which only affects 3D converted elements.
Values: percentage, length, left, center, right, top, center, bottom

backface-visibility: Hide the back side of the content, the back side is visible by default, inverted The content after the transformation is still visible. When backface-visibility is set to hidden, the content will be hidden after rotation, and the front face will no longer be visible after rotation. Values: visible, hidden
transform-style: 3D rendering, sets how embedded elements are rendered in 3D space, there are two values:
flat: all sub-elements are rendered in a 2D plane

preserve-3d: Preserve 3D space

The above is the detailed content of A brief introduction to transformations and transitions, animations and associated properties in CSS3. For more information, please follow other related articles on the PHP Chinese website!