How browsers render

Browser Rendering steps

  1. Process HTML tags and build DOM trees.
  2. Process CSS tags and build CSSOM trees.
  3. Combine DOM and CSSOM into a Render Tree.
  4. Layout according to the render tree to calculate the geometry information of each node.
  5. Paint each node onto the screen. Painting involves drawing each visual part of an element onto the screen, including text, colors, borders, shadows, and alternate elements (such as buttons and images).
  6. When parts of a document are drawn in different layers, overlapping each other, Compositing must be done to ensure that they are drawn to the screen in the right order and the content is displayed correctly.

DOM tree, CSSOM tree, render tree

A link to the

  • Render tree construction, layout, and drawing
  • Render pages: How browsers work
  • Simple browser rendering principles

CSS animations

CSS animation consists of two parts: Transition and animation.

CSS Transform

  • Four common attributes

    The displacement of the translate

    The zoom scale

    Rotate the rotate

    Tilt skew
  • Usage of each attribute:
/* Rotate 10 degrees */
transform: rotate(10deg);

/* Tilt 20 degrees */
transform: skew(20deg);

/* Zoom in at 1.5 */
transform: scale(1.5);

/* Shift 120 pixels to the right, */
transform: translate(120px.0px);
transform: translateX(120px);

/* The left and down displacement is negative */
transform: translate(120px, -10px);
transform: translateY(-10px);
Copy the code

CSS Transition

  • What it does: Complement intermediate frames by adding A transition from state A to state B with A tween animation instead of A very direct transition.

CSS Transitions determine which properties animate (explicitly listing them), when to start (set delay), how long to last (set duration), and how to animate (define timing functions, such as at a constant speed or fast to slow).

  • Controls the transition properties
attribute meaning
transition-property Specifies properties that use transition effects
transition-duration Sets the duration of the transition animation
transition-timing-function Specifies the rotation speed curve for the transition effect
transition-delay Set the delay time for the animation
  • Abbreviation of grammar
div {
    transition: <property> <duration> <timing-function> <delay>;
}
Copy the code
  • Take a chestnut
/* Animate multiple attributes together */
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}
Copy the code
  • Here’s another chestnut
nav {
  display: flex;
  gap: 0.5 rem;
}

a {
  flex: 1;
  background-color: # 333;
  color: #fff;
  border: 1px solid;
  padding: 0.5 rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.5 s ease-out;
}

a:hover {
  background-color: #fff;
  color: # 333;
}
Copy the code
  • Note ⚠ ️

Not all properties can be transitioned. For example, display: None /block cannot be transitioned, so that you change your visibility: hidden/visible

CSS Animation

  • Animation uses @keyframes to achieve more complex animation effects.
  • Animation to create an animation effect requires two steps: first declare the animation with a keyframe, and then invoke the animation with the animation.
  • @keyframes two ways
/* from/to */
@keyframes identifier {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%); }}/* Percentage of keyframes */
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%.72% { left: 50px; }
  100% { top: 100px; left: 100%; }}Copy the code
  • Abbreviation of grammar

Each of the following attributes has a corresponding individual attribute

div {
    animation: <duaration> <timing-function> <delay> <iteration-count> <play-state> <fill-mode> <direction>;
}
Copy the code
  • Child attributes
attribute meaning
animation-delay Set the delay.
animation-direction Sets whether the animation runs in reverse or back to the start position after each run.
animation-duration Sets the length of an animation cycle.
animation-iteration-count Set the number of animation repeats. You can specify infinite number of animation repeats.
animation-play-state Allows animation to be paused and resumed.
animation-fill-mode Sets how a CSS animation applies the style to its target before and after execution.
animation-timing-function – Set the animation speed, that is, set how the animation changes from keyframe to keyframe by creating an acceleration curve.
  • Take a chestnut
p {
  animation-duration: 3s;
  animation-name: slidein;
  /* animation: 3s slidein; * /
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%; }}Copy the code
  • Recommended reading

Animation link 🔗

  • CSS transform – MDN
  • Transition tips and details you probably didn’t know
  • Css3: Transform, Transition, animation
  • You may not know the tricks and details of Animation
  • In-depth understanding of CSS animation
  • Using CSS animation