First, the browser rendering principle

Step 1.

• Building an HTML tree (DOM) from HTML

• Building a CSS Tree from CSS (CSSOM)

• Combine two trees into a render tree

• Layout (document flow, box model, calculated size and location)

• Paint (border colors, text colors, shadows)

• Compose (display page based on cascading relationships)

2. Update styles

2.1 Generally use JS to update

• div.style.background = ‘red’

• div.style.display = ‘none’

• div.classList.add(‘red’)

• Div.remove () removes the node

2.2 Three update modes

• The first option is all go

  Div.remove () triggers the current disappearance of other elements layout

• Second, skip layout

  Change the background color to repaint + Composite

• Third, skip Layout and Paint

  Transform, just composit

  You must view the effect in full screen and view the problem in iframe

What process is triggered by each property? See csstriggers.com/

3.CSS animation optimization

Refer to the article: developers.google.com/web/fundame…

Second, the transform

Tips: Inline elements do not support transform and need to be converted to a block element

1. Displacement translate(2D plane)

1.1 grammar

transform: translate(x, y);
transform: translateX(n);
transfrom: translateY(n);
Copy the code

• translateThe biggest advantage is that it does not affect the position of other elements
• translateThe 100% units are calculated relative to their width and height

1.2 Horizontal and vertical center

top:50%;
left:50%;
transform:translate(-50%, -50%);
Copy the code

2. Scale (2D plane)

2.1 grammar

transform: scale(x, y)
Copy the code

• transform: scale(1, 1): Double the width and height, equivalent to no amplification
• transform: scale(2, 2)The width and height have been enlarged by twice
• transform: scale(2)If only one argument is written, the second argument is the same as the first argument
• The transform: scale (0.5, 0.5): to reduce the
• scaleBiggest advantage: You can set the conversion center zoom, default to center zoom, and does not affect other boxes

3. Rotate (2D plane)

3.1 grammar

div{
      transform: rotate(0deg);
}
Copy the code

4. Translate, rotate (3D plane)

4.1 the perspective

• If you want your web page to look 3D you need perspective (understood as a 2D projection of a 3D object)

• Actually mimicking the human visual position can be seen as arranging the eye to see all the time

• Perspective, also known as line-of-sight, is the distance from a person’s eyes to the screen

• The closer to the visual point, the bigger the image in the computer plane, and the farther away, the smaller the image

• The units of perspective are pixels

• Perspective needs to be written above the parent box of the element being inspected

  • D: Line-of-sight. Line-of-sight is the distance from a person’s eyes to the screen

  • Z: Is the Z-axis, the larger the z-axis (positive), the larger the object we see

4.2 translateZ

TranslateZ vs. Perspecitve

• perspecitveTo set the parent,translateZSets the child element

4.3 rotate

4.3.1 rotateX

1. The left hand rule

• The thumb of your left hand points in the positive direction of the x axis

• The rest of the fingers bend in the direction that the element rotates along the X-axis

2. Code case

div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)}Copy the code

4.3.2 rotateY

1. Left hand rule

2. Code cases

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)}Copy the code

4.3.3 rotateZ

Code examples:

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)}Copy the code

4.3.4 rotate3d

• transform: rotate3d(x, y, z, deg)Rotate deG as an Angle along the custom axis
• X, y, and z are vectors for the axis of rotation, indicating whether you want to rotate along that axis, and the last one indicating the Angle of rotation
  • transform: rotate3d(1, 1, 0, 180deg)— rotate 45deg diagonally
  • transform: rotate3d(1, 0, 0, 180deg)— rotate 45deg along the X-axis

Third, the transition

Transition animation: a gradual transition from one state to another

Now often used with :hover.

1. Grammar

transition: The attribute to transition takes time when the motion curve starts;Copy the code

• Properties: CSS properties that you want to change, width, height, background color, inside and outside margins. If you want all properties to transition, you can write all
• Time spent: in seconds (must be written in units) such as 0.5 seconds
• Motion curve: The default is ease (can be omitted)
• When to start: unit is second (must write unit) Delay trigger time can be set. Default is 0s (can be omitted)
• The latter two attributes can be omitted
• Remember the use of transitions: who do transitions to who add

2.tips

Not all attributes can transition

• Display: None => Block cannot transition, generally change to visibility:hidden =>visible

4. Animation function

1. Basic use of animation

• Let’s define the animation
• Call the defined animation

2. Syntax format

@keyframesAnimation name {0% {
        width: 100px;
    }
    100% {
        width: 200px}}Copy the code

Animation sequence:

• 0% is the beginning of the animation, 100% is the completion of the animation, such a rule is the animation sequence
• Specifying a CSS style in @keyframs will create an animation of the new style instead of the current style
• Animation is the effect of gradually changing elements from one style to another, changing as many styles as you want as many times as you want
• Use a percentage to specify when the change occurredfrom 和 toIs equal to 0% and 100%

div {
	/* Call animation */
    animation-name: Animation name;/* Duration */
 	animation-duration: duration; /* Short for animation: animation name duration */}Copy the code

To stop the animation on the last frame:

Animation: Animation name duration forward;Copy the code