Summary of CSS Knowledge

1. Browser rendering principle

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine two trees into one render tree
  4. Layout (document flow, box model, calculated size and location)
  5. Paint (to draw border colors, text colors, shadows, etc.)
  6. Compose (display screen according to cascade relationship)

2. Two ways to do CSS animation

1. Use transform twice

.a===transform===>.b

.b===transform===>.c

How do I know the intermediate point — using setTimeout or listening for the transitionEnd event

2. Use the animation

Declare keyframes

Add animation

3. Available data

  1. Articles written by the Google team
  2. csstriggers.com/
  3. MDN