1. CSS animation

concept

When multiple still pictures are played at a certain speed, the naked eye will misperceive them as moving pictures.

Ii. Browser rendering principle

steps

  1. Building an HTML Tree (DOM)
  2. Building a CSS Tree (CSSDOM)
  3. Combine the above two trees into a render tree.
  4. Layout, document flow, box model, calculation size and location
  5. Paint, “Paint,” means to draw border colors, shadows, etc
  6. Compose, according to the cascade relationship display screen

Update the style

JS update style:

  1. div.style.background =’red’
  2. div.style.display =’none’
  3. div.classList.add(‘red’)
  4. Div.remove () deletes the node directly tips: Write styles during actual development

Update the way

  1. Div.remove () will trigger the current hour and other elements relayout
  2. Change the background color directly repaint+ Compasite
  3. Change transform only compasite

Animation optimization

  1. JS optimization: Use requestAnimationFrame instead of setTimeout or setlnterva
  2. CSS optimization: Use will-change or translate3

transform

  1. Translate translation
  2. Scale (overall, including all dimensions such as border width)
  3. The rotate rotating
  4. Skew tilt

B: Yes

role

Supplementary intermediate frame

usage

  1. Transition: Indicates the delay of the attribute name duration
  2. transition: left 200ms linear
  3. Transition: Left 200ms, Top 400ms You can use a comma to separate two different attributes
  4. Transition: All 200ms You can use all to represent all attributes
  5. Transition means has: linear | ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | | step – end steps

Intransitive condition

  1. Display: None => Block cannot transition
  2. Visibility :hidden =>visible
  3. Background colors can transition
  4. Transitions must have a start, such as transitions between hover and non-hover states

4. Animation

@ keyframes grammar

  • The from to the grammar

  • Percentage grammar

Animation abbreviation syntax

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

  1. Duration: 1s or 1000ms
  2. Transition mode: takes the same value as transition, such as Linear
  3. Times: 3 or 2.4 or infinite
  4. Direction: reverse | alternate | alternate – reverse
  5. Filling pattern: none | recently | backwards | to both
  6. Whether to suspend: paused | running all these attributes have corresponding attributes separately