Front-end note 13, morphing and animation-related properties

Transform

Transform: Set deformation, add browser prefix-o-;-webkit-;-moz-, etc., have the following deformation function Translate(TX [, Ty]): The component moves up the TX horizontally, vertically up ty distance TranslateX(TX): The component moves the TX distance horizontally Translatey(TY): The component moves the Ty distance vertically Scale(Sx,sy): The scale is SX on the scale, the vertical scale is sy;sy, the default equals SX ScaleX(SX): Scaled only on landscape scale, SX ScaleY(SY): Scales only vertically, with a scale of SY Rotate(angle): component Clockwise turn angle angle Skew(Sx[,sy]): Set the component to tilt the sx angle along the x axis, tilt the sy angle along the y axis, Sy can be omitted, default is 0 skewx(SX): Sets the component to tilt the sx angle along the x-axis Skewy(SY): Sets the component to tilt the sy angle along the y axis Matrix(m11,m12,m21,m22,dx,dy): A function based on matrix transformation, the first four parameters will constitute a deformation matrix, Dx,dy will be responsible for the left system to translate Transform-origin: Sets the center point of the transformation, the property value is specified as Xcenter,ycenter, and supports the following property values:Left: Specifies that the center point of rotation is located at the right edge of the component and is assigned to XcenterTop: Specifies that the center point of rotation is at the upper boundary of the component and is assigned only to YcenterRight: Specifies that the center point of rotation is at the left edge of the component and is assigned only to XcenterBottom: Specifies that the rotation center point is at the lower boundary of the component and is assigned only to YcenterCenter: Specifies that the center point of rotation is in the middle of the component, and if the Xcenter,ycenter is set to center, the center point is the centre of the elementLength Value: Specifies the length of the center point of rotation from the left and right boundspercent: Specifies the position of the rotation center point in the horizontal, vertical transition transitionA change in the way a gradient is smoothed occurs when an attribute of an animation control component changes over a period of time. Consists of the following 4 sections Transition-property: Specifies which property of the element is smooth-gradient, you can specify Background-color,width,height, etc. transition-duration: Specifies the duration of a smooth gradient transition-timing-function: Specifies the speed of the gradient, optional valuesease: Start slow and then slow down, equivalent to Cubic-bezier (0.25,0.1,0.25,1)linear: Uniform, equivalent to Cubic-bezier (0,0,1,1)ease-in: Starts slowly and then accelerates, equivalent to Cubic-bezier (0.42,0,1,1)ease-out: Start fast and then slow down, equivalent to Cubic-bezier (0,0,0.58,1)ease-in-out: Start slow then speed up and then slow down, equivalent to Cubic-bezier (0.42,0,0.58,1)Cubic-bezier (x1,x2,y1,y2): Control the speed of animation by Bembezi function Transition-delay: Specify the delay time AnimationAnimations: The following properties are available Animation-name: Specify the animation name animation-duration: Specify the duration of the animation animation-timing-function: Specifies the speed at which the animation changes Animation-delay: Specify animation delay time Animation-iteration-count: Specify animation loop execution times Focus Animation: Fish Eye Effect。 When the mouse is placed above the text, the text is enlarged

Front-end note 13, morphing and animation-related properties