How browsers render

The rendering process looks something like this: Build HTML tree from HTML -> Build CSS tree from CSS -> Merge two trees and render them into a single tree ->Layout (document flow, box model, calculate size and position) ->Paint (border color, text color, shadow, etc.) ->Compose (display screen based on cascading relationship)




Two ways to animate CSS

1.transform

The CSStransform property allows you to rotate, scale, tilt, or pan a given element. This is done by modifying the coordinate space of the CSS visual formatting model.

transform: translate(120px, 50%); Displacement transform: scale(2, 0.5); Scaling transform: rotate in turn (0.5); Rotate transform: Skew (30DEg, 20DEg); tiltCopy the code

See MDN (Transform) for more effects and syntax



2. The transition (transition)

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Syntax Transition: Attribute name duration Delay (if two attributes are common, you can place a comma between the attributes, or you can use all to represent all attributes)

See MDN (Transition) for more effects and syntax

transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out;
Copy the code


Conclusion: There are many styles of animation effects. In the learning process, you only need to remember the commonly used ones, and then look at the document when you need to do some relatively rare effects. After reading the syntax, you can use it, which saves more learning time.