Browser rendering principle:

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

** Three update methods: **

  1. Js/CSS > Styles > Layout > Draw > Composition **
  2. Js/CSS > Styles > Draw > Composition **
  3. ** JS/CSS > Styles > Composition **

Transform four functions:

  • Displacement translate: TranslateX, translateY, translateZ, translate3D (x,y,z), translateX, translateY, translate3D (x,y,z
  • Scale: transform: scale (1.5), transform: scale (1.5), transform: scale (1.5)
  • Rotate rotate: transform:rotate(45deg) by 45 degrees. Rotate is perpendicular to the screen and rotatex is the x axis.
  • Skew: Transform: skewX(15DEG), skew 15 degrees around the x axis; Or transform:skewY, around the Y-axis
  • The above functions can be combined. Translate: Add a space between each function
** Transition: **

** adds intermediate frames **

There are four attributes of transition: attribute name, duration, transition mode, and delay

** display: None cannot transition to block**

Animation animation:

** Need to add keyframes: keyframes XXX {(need to define some behavior inside) **

}

Then you need to add:

**        #demo.start{**

** Animation: XXX 1.5s forward (forwards to the last frame of animation)**

}

** How to make animation return alternately, animation :alternate can do loading animation

The property infinite controls the number of animations **