-webkit-font-smoothing,transition,transform Animation

1.-webkit-font-smoothing

A "-webkit-font-smoothing" attribute is added to the CSS3. This property can make the font anti-aliasing on the page, and the font will look clearer and more comfortable after use.

None: The default style of the text, may appear blurry jagged appearance

antialiased: Non-aliased to make text visible

2.transform

The meaning of transform is: change, make ... to transform;

The properties of transform include: rotate ()/skew ()/scale ()/translate (,), and also X, Y, for example: Rotatex () and Rotatey (), and so on.

Let's break down the usage of each attribute:

Transform:rotate ():

Meaning: rotation, wherein "deg" is the meaning of "degree", such as "10deg" means "10 degrees" the same as below.

Transform:skew ():

Meaning: Tilt;

Transform:scale ():

Meaning: proportion; "1.5" means to enlarge by 1.5, if you want to enlarge twice times, you should write "2.0" and reduce the negative "-".

Transform:translate ():

Meaning: change, displacement; The following means that the right displacement of 120 pixels, if the upward displacement, the back of the "0" to change the value of the line, the left downward displacement is negative "-".

3.transition

transition allows the CSS property values to smoothly transition within a certain time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner. "

Transition	Shorthand property, which is used to set four transition properties in one property.
Transition-property	Specifies the name of the CSS property that the transition is applied to.
Transition-duration	Defines the time that the transition effect takes. The default is 0.
Transition-timing-function	A time curve that specifies the transition effect. The default is "ease".
Transition-delay	Specifies when the transition effect begins. The default is 0.

over-the-curve effect

 (linear: linear transition. Equivalent to Bezier curves (0.0, 0.0, 1.0, 1.0) Ease: smooth transitions. Equivalent to Bezier curves (0.25, 0.1, 0.25, 1.0) Ease-in: from slow to fast. Equivalent to Bezier curves (0.42, 0, 1.0, 1.0) Ease-out: from fast to slow. Equivalent to Bezier curves (0, 0, 0.58, 1.0) Ease-in-out: From slow to fast to slow. Equivalent to Bezier curves (0.42, 0, 0.58, 1.0) Cubic-bezier (<  num ber  > , <  number  > ,  > , <  number  > ): A specific Bezier type with 4 values in the [0, 1] range) 

<! DOCTYPE html>
 

 

 
   

-webkit-font-smoothing,transition,transform Animation