Basic conversion and transition of CSS3 animation, and transition of CSS3 animation Conversion

Basic conversion and transition of CSS3 animation, and transition of CSS3 animation Conversion

The theoretical knowledge is not solid enough to reflect your ability to solve problems to a certain extent. Today, we take CSS3 animation as an example to briefly recall some of its basic attributes, which we often use in common applications.

Common animation attributes:

Transform: translate (x, y); // translation. x indicates the moving distance, and y indicates the moving distance;

Transform: scale (x, y); // scale. x indicates the horizontal scaling factor, and y indicates the vertical scaling factor;

Transform: rotate (x); // rotation, x represents the degree of clockwise rotation, such as rotate (10deg );

Transform: skew (x, y); // skew. x \ y represents the tilt animation transition along the x axis and y axis, respectively.

Transition-property lists the CSS attributes of elements that should be transitioned. Excessive attributes include the background, border, and box model attributes:

Transition-duration

Transition-timing-function is used to set the transition speed. one of the following options can be used: transition, linear, transition-in, transition-out, or transition-in-out.

Transition-delay animation delay Time

Abbreviations:

# Selector {transition: transform 0.2 s finished}

Values must be in the following order: transition-property transition-duration transition-function transition-delay

Instance display:

CSS code: In CSS3 conversion and transition graphs, the yellow coil shows the code of the Transition Part. After the animation is set to be completed within 1 s, the conversion effect is displayed in the green box, indicating that when the mouse moves to the h1 title, text will be 2.5 times larger.

All in all, it is important to master the basic knowledge of animation.

Reprinted from: http://www.aspnetjia.com/Cont-79.html