Summary of CSS Knowledge

Browser rendering

  • How browsers render
  • Browser render update mode

CSS animation optimization:

Animation optimization:

1. Optimize JavaScript execution

  • For animation effects, avoid using setTimeout or setInterval and use requestAnimationFrame instead.
  • Move long-running JavaScript from the main thread to the Web Worker.
  • Use microtasks to perform DOM changes to multiple frames.
  • Use Chrome DevTools Timeline and JavaScript profiler to assess the impact of JavaScript
  • Using setTimeout or setInterval to perform visual changes like animation, the callback will run at some point in the frame, probably right at the end, and this can often cause us to lose frames and get stuck.

2. Reduce the scope and complexity of style calculation

  • Reduce the complexity of the selector; Use class-centric methods, such as BEM.
  • Reduce the number of elements whose styles must be computed.

3. Avoid large and complex layouts and layout jitter

  • The scope of a layout is generally the entire document.
  • The number of DOM elements affects performance; Triggering layouts should be avoided whenever possible.
  • Evaluate the performance of the layout model; New Flexbox are generally faster than older Flexbox or floating-based layout models.
  • Avoid forced layout synchronization and layout jitter. The style values are read and then the style changes are made.

4. Simplify the complexity of drawing and reduce the drawing area

  • Changing any property other than transform or opacity always triggers a drawing.
  • Drawing is usually the most expensive part of the pixel pipeline; Drawing should be avoided whenever possible.
  • Reduce the area of drawing by elevating layers and choreographing animations.
  • Use Chrome DevTools draw analyzer to evaluate the complexity and overhead of drawing; Minimize complexity and overhead.

5. Stick to synthesizer attributes and management counts only

  • Do use transform and opacity property changes for animation.
  • Use will-change or translateZ to promote moving elements.
  • Avoid overuse of promotion rules; Each layer requires memory and administrative overhead.

6. Enable the input handler to remove jitter

  • Avoid long running input handlers; They may prevent rolling.
  • Do not make style changes in the input handler.
  • Causes the handler to remove jitter; Store event values and process style changes in the next requestAnimationFrame callback.

The 2 d transformation

  • Transform is one of the subversive features in CSS3, which can realize the displacement, rotation, deformation and scaling of elements.
  • Zoom: scale
  • Mobile: translate
  • Rotation: rotate
  • Tilt: skew

An inline element does not normally support a transform, so it is converted to a block 2D coordinate system first: A 2D transform is a technique that changes the position and shape of a label on a 2D plane.

2D translation moves translate

  • 2D movement is a feature within 2D transformations that changes the position of elements on the page, similar to positioning.
  • transform: translate(x,y);
  • Define 2D transformations that move elements along the X and Y axes
  • The percentage units in translate are relative to its own elements translate:(50%,50%);
  • Translate is similar to positioning and does not affect the position of other elements
  • Has no effect on inline labels

Rotate of a 2D transform

  • 2D rotation refers to rotating elements clockwise or counterclockwise in a 2-dimensional plane.
  • transform:rotate(angle)
  • When the Angle is positive, it is clockwise; when the Angle is negative, it is counterclockwise
  • The default rotation center is the center of the element
  • /* Set the center of rotation */
  • transform-origin: x y;

The scale of the transformation

  • transform:scale(x,y);
  • Zooming, as the name suggests, zooms in and out. Once you add this attribute to an element, you can control whether it grows or shrinks. .
  • Transform :scale(1,1) : double width and height, relative to no scale
  • Transform: Scale (2,2) : Width and height increased by 2 times
  • Transform :scale(2) : write only one parameter, the second parameter is the same as the first parameter, equivalent to scale(2,2)
  • The transform: scale (0.5, 0.5) : narrow
  • Rotate () rotate() scale() rotate() rotate() scale() And so on, its order will shadow the effect of conversion. (Rotation will change the axis direction)

Css3D animation

Transition:

  1. Transition – Using transitions to specify how to switch when a property changes – using transitions can create some very nice effects and improve the user experience

  2. Transition-property: specifies the property for which the transition is to be performed

  3. Transition-duration: specifies the duration of the transition effect

  4. Transition-timing-function: a timing function that specifies how transitions are performed

  5. Transition-delay: The delay in executing the transition effect after a period of time

Animation is the effect of gradually changing an element from one style to another. You can change as many styles as you want as many times. By specifying a CSS style in @KeyFrames, you can create an animation that changes gradually from the current style to the new style. Specify when the change occurred in percentage terms, or use the keywords “from” and “to”, equivalent to 0% and 100%. 0% is the beginning of the animation, 100% is the completion of the animation. Such rules are animation sequences.

  1. Defining animations with KeyFrames (similar to defining class selectors)
@keyframes Animation name {0% {width:100px;
   }  
   100% {width:200px; }}Copy the code
  1. Element use animation
div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* Call animation */Animation-name: indicates the animation name./* Duration */Animation-duration: duration of animation; }Copy the code

Animation name Animation time motion curve When to start playback times whether to reverse the animation waiting or ending state; animation: myfirst 5s linear 2s infinite alternate; After the box animation is finished, pause at the end position: animation-fill-mode: forward wants animation to walk back, not jump straight back: animation-direction: alternate pause animation: animation-play-state: puased;

Ex. :

 div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* Animation name */
            animation-name: move;
            /* Duration */
            /* animation-duration: 2s; * /
            /* Motion curve */
            /* animation-timing-function: ease; * /
            /* When to start */
            animation-delay: 1s;
            Iteration Conut iteration is infinite */
            /* animation-iteration-count: infinite; * /
            Default is normal. If you want alternate */
            /* animation-direction: alternate; * /
            /* The default state after the animation is backwards to the start state. We can keep him in the finish state forward */
            /* animation-fill-mode: forwards; * /
            /* animation: name duration timing-function delay iteration-count direction fill-mode; * /
             animation: move 2s linear 0s 10 alternate ; 
            Name duration must be */
            /* animation: move 2s linear  alternate forwards; */
        }
          div:hover {
            /* Hover over the div to stop animation, and continue animation */
            animation-play-state: paused;
        }

Copy the code

3 d conversion

Three dimensional coordinate system

  • Note: x is positive on the right and negative on the left
  • Y-axis: straight down Note: y is positive below and negative above
  • Z axis: vertical screen Note: positive value out, negative value in

3 d mobile translate3d

  • Transform: translate3D (x,y,z) : translate3D (x,y,z) : translate3D (x,y,z
  • Translform :translateX(100px) : Just move on the x axis
  • Translform :translateY(100px) : Just move on the Y axis
  • | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
  • Because of the z axis is perpendicular to the screen, from inside to outside, so the default is no element to move in the direction of z axis, translform: translateZ (100 px) : just move on the z axis. With perspective, you can see the changes caused by translateZ

Perspective perspective

Z-axis translation is a three-dimensional effect (near large, far small). By default, the page does not support perspective. If you want to see the effect, you must set the page’s viewing distance to 1000px, and add the following perspective on the parent element: 1000px; Statement, that is to say

 body {
            /* Perspective is written above the parent box of the observed element */
            perspective: 200px;
        }
Copy the code

3 d rotation rotate3d

Transform :rotateX(45DEg) :rotateY(45deg) :rotateY(45deg) : Transform: Rotate3D (x, Y, Z, DEG) : Rotate3D (x, Y, Z, DEG) : Transform: Rotate3D (1, 0, 0, 45DEg); transform: rotate3d(0, 1, 0, 45deg); Transform: Rotate3D (1, 1, 0, 45deg);

3 d rendering transfrom – style

  • Controls whether a child element opens a three-dimensional environment.
  • It is the sub-box that adds to the influence of the father.
  • Transform-style: preserve-3d; The child element turns stereo on. The default value is flat off
  • transform-style: preserve-3d;

Browser private prefix

The browser private prefix is compatible with older versions and is not required for newer browsers.

  1. Private prefix
  • -moz- : indicates the private property of the Firefox browser
  • -ms- : indicates the private property of Internet Explorer
  • -webkit- : indicates safari or Chrome private properties
  • -o- : indicates Opera private property
  1. The preferred way of writing
  • -moz-border-radius: 10px;
  • -webkit-border-radius: 10px;
  • -o-border-radius: 10px;
  • border-radius: 10px;