This chapter on CSS knowledge to do a summary, mainly for the following aspects, the first is the browser rendering principle, followed by CSS animation two ways and CSS positioning.

How browsers render

steps

  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)

Three different rendering methods

  1. The first one, for examplediv.remove(), will trigger the current disappearance of other elements relayout
  2. The second option, for example, is to change the color and repaint + Composite
  3. Third, for example: change transform, just composite

It would be too tedious to try rendering everything and then get the results, so a programmer tested the rendering results of all the attributes at ——>CSS Triggers

CSS animations

Definition of animation

Animation is by many delicate picture (frame) with a certain speed of continuous playback, the naked eye because of the visual illusion of the tragic image, and mistakenly thought that is the active picture.

The concept of animation

  • Frames: Each still picture is called a frame
  • Playback speed: 24 frames per second or 30 frames per second

CSS animation optimization scheme

  • JS optimization. Use requestAnimationFrame instead of setTimeout or setInterval
  • CSS optimization. Use will-chage or translate

Transform the whole solution

Four common attributes

  • The displacement of the translate
  • The zoom scale
  • Rotate the rotate
  • Tilt skew

Note: These attributes are usually used in conjunction with the transtion. Otherwise, the animation is very rigid and inline does not support the transform, so you need to change it to a block first

Translate – > displacement

  • translateX(<length-percentage>
  • translateY(<length-percentage>)
  • translate(<length-percentage>, <length-percentage>?)
  • TranslateZ (<length>) and parent container perspActive
  • translate3d(X, Y, Z)

Translate (-50%, -50%) Center the absolute positioning element

Scale – > zoom

  • scaleX(<number>)
  • scaleY(<number>)
  • scale(<number>, <number>?)

The rotate – > rotate

  • rotate([<angle> | <zero>])
  • rotateX([<angle> | <zero>])Is rotated on the X-axis
  • rotateY([<angle> | <zero>])Is rotated on the Y axis
  • rotateZ([<angle> | <zero>])Is rotated on the Z axis
  • rotate3d([<angle> | <zero>])

Skew – > tilt

  • skewX([<angle> | <zero>)
  • skewY([<angle> | <zeor>)
  • skew([<angle> | <zeor>], [<angle> | <zero>]?)

Multiple effect

Using the above attributes together, you can achieve some complex effects

The transition transition

role

Complete the middle frame of the animation, so that the animation is not so stiff

attribute

  • transition: Attribute Name Duration Delay of transition mode
  • transition: left 200ms linear
  • transition: left 200ms, top 400msYou can separate two different attributes with a comma
  • transition: all 200msYou can use all to represent all attributes
  • Transition modes include:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

Pay attention to

Not all attributes can be transitioned

There is no transition effect when you want display: None to become a block

You can change your visibility:hidden to visible

A transition must have a beginning

For example hover and non-hover are two animations

If there is an intermediate point, you can solve it in the following two ways

  1. Transform —–> transform a to B and b to C

  2. The use of animation

Animation animation

@keyframes Complete syntax

Declare a keyframe. There are two ways to write it

  1. from to
@keyframes xxx{ from{ transform: translateX(0%); } to{ transform: translateX(100%); }}Copy the code
  1. The percentage
@keyframes xxx{ 0%{ transform: none; 66.66%} {the transform: translateX (200 px); } 100%{ transform: translateX(200px) translateY(100px); }}Copy the code

Animation abbreviation syntax

Animation: | | transition way long delay | | | times direction whether filling | | suspended animation

  • Duration: 1s or 1000ms
  • Transition mode: The value is the same as transition
  • Times: 3 or 2.4 or infinite
  • Direction: reverse | alternate | alternate – reverse
  • Filling pattern: none | recently | backwards | to both
  • Whether to suspend: paused | running
  • Each of the above attributes has a corresponding individual attribute

The position location

attribute

  • staticThe default value stays in the document stream
  • relativeRelative positioning, rising, but not out of the document flow
  • absoluteAbsolute location. The location base is the nonstatic, nearest location element in the ancestor element
  • fixedFixed positioning. The positioning reference is viewPort
  • stickySticky positioning, there are too many bugs in the mobile end, not too much introduction

Relative positioning

The usage scenarios are as follows:

  1. Used for displacement (not often)
  2. Used to locate absolute elements

This parameter is used with z-index

  • Z-index: default value of auto. No new cascading context is created
  • z-index: 0/1/2
  • z-index: -1/-2

By default, each z-index is auto, which evaluates to 0

Absolute absolute positioning

The usage scenarios are as follows:

From the original position, another layer. Such as dialog box close button, mouse prompt and so on

This parameter is used with z-index

Note: Some browsers do not write top/left, resulting in placement errors

  • Use left: 100%
  • Use the left: 50%; Plus negative margin

Fixed Fixed position

The usage scenarios are as follows:

  1. advertising
  2. Back to top button

This parameter is used with z-index

  • Once the element is located, it automatically goes to the top of everything. The default z – index = 0
  • All positioned elements are based on text, the first level is 0, and so on
  • If it is -1, lower than the background, it can go back infinitely, but not beyond the default cascading context

Cascading context

The above location mentioned cascading context, but what is a cascading context? A cascading context is also called a stacked context.

Metaphor: Each cascading context is a new small world (scope). The Z-index in this small world has nothing to do with the outside world. Only the Z-index in the same small world can be compared

So what nonorthogonal attributes can create it? These are some of the more common attributes

z-index / flex / opacity / transform