How browsers render

Process:

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine two trees into a render tree
  4. Layout (document flow, box model, calculated size and location)
  5. Paint (border colors, text colors, etc.)
  6. Composite (display the picture according to the cascading relationship)

Three ways to update styles

  1. js–style–layout–paint–composite
  2. js–style–paint–composite
  3. js–style–composite

Two ways to animate CSS

Transform and transition transform

  1. Translate displacement
Values can be pixels or percentages. <translate()> = translate(<length-percentage>, <length-percentage>?) <translateX()> = translateX( <length-percentage> ) <translateY()> = translateY( <length-percentage> ) <translatez()> = TranslateY (<length-percentage>)// Perpendicular to the screen direction, not commonly used; If so, add the perspective attribute to the parent element to determine the originCopy the code

You can use Translate to center the absolute positioning element:

top:50%; left:50%; transform:translate(-50%,-50%)
Copy the code
  1. Scale zooming

Scale (1.2) double the original. You can also set X and Y; Not very often. It gets fuzzy

  1. The rotate rotating

Rotate (45deg) Clockwise rotation 45 degrees Is generally used to rotate a 360 degree button

  1. Skew tilt

Skew (45 deg, 45 deg); // Horizontal and vertical tilt 45 degrees each

Transform can be used in combination;

The transform: none; // Cancel all

Transition: Attribute name duration Excessive mode delay

  • Different attributes can be separated by commas: Transition: left200ms, Top400ms
  • You can use all to represent all attributes
  • Transition: linear | ease (default) | ease – in | ease – out | ease – in-out and so on
  • Not all attributes can be transitioned from display: None to display: block
  • If the animation has an intermediate point, use a transform twice:
b--transform--c; Use setTimeout or listen for transitionEnd eventsCopy the code

1. Declare key frames; Add 2 syntax for animation keyframes

A, the from... To write @keyframes XXX {0%{transform: scale(1); 100%} {the transform: scale (1.2); }}Copy the code
@keyframes XXX {0%{top: 0; Left: 0; } 20%, 50%{left: 50%; } 100%{ top:100px; left:100%; }}Copy the code

Grammar animation animation abbreviation: time delay | | | transition way times | | direction whether filling | | suspended animation animation: Animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, Animation-direction, animation-fill-mode and animation-play-state

  • The transition is the same as transition
  • Direction: reverse | alternate | alternate – reverse
  • Filling pattern: none | recently | backwords | to both
  • Whether to suspend: paused | running
  • All of the above attributes have a corresponding individual attribute. When changing a single attribute, write a separate attribute name
  • Let the animation stop at the last frame, add a forward

Other ideas

CSS properties are many, to learn slowly in the process of doing, check MDN learning to use methods, need to slowly accumulate experience!!