animation

define

  • Composed of many still frames
  • When played continuously at a certain speed (e.g., 30 pictures per second)
  • The naked eye produces an illusion from a visual remnant
  • They mistook it for a moving picture

concept

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

Developer Tools render

  • Single cloud F12 — > Any TAB — > ESC — > three small dots on the left — > Rendering — > Paint Flashing

How browsers render

Articles written by the Google team

  • Render tree construction, layout, and drawing
  • Rendering performance
  • Use transform to animate

What is triggered by viewing CSS properties

  • CSSTriggers.com

Browser rendering process

steps

  • Building an HTML tree (DOM) from HTML
  • Building a CSS Tree from CSS (CSSOM)
  • Combine two trees into one render tree
  • Layout (document flow, box model, calculated size and location)
  • Paint (to draw border colors, text colors, shadows, etc.)
  • Compose (display screen according to cascade relationship)

How to update styles

JS is generally used to update styles

  • For example, div. Style. background = ‘red’
  • For example, div. Style. display = ‘none’
  • Such as div. ClassList. The add () ‘red’
  • For example, div.remove() simply removes the node

Three update modes

CSS Animation optimization

  • Google article
  • JS optimization: userequestAnimationFrameInstead ofsetTimeoutorsetInterval
  • CSS optimization: Usewill-change 或 translate

transform

Four common functions

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

Pay attention to

  • You usually need to coordinate the transition
  • Inline elements do not support a transform and need to become a block first

The transform of the translate

Commonly used to write

translateX(<length-percentage>) translateY(<length-percentage>) translate(<length-percentage>,<length-percentage>? > translateZ(<length>) and parent containerperspective
    translate3d(x,y,z)
Copy the code
  • Translate (-50%, -50%) Center the absolute positioning element
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
Copy the code

Scale of transform (not used, easy to blur)

Commonly used to write

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

The transform of the rotate

Commonly used to write

  • rotate([<angle>|<zero>])
  • rotateX([<angle>|<zero>])
  • rotateY([<angle>|<zero>])
  • rotateZ([<angle>|<zero>])
  • rotate3d

Pay attention to

  • Generally used for 360 degree rotation loading

The transform of skew

Commonly used to write

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

Transform Multiple effects

Use a combination of

  • Translate the transform: scale (0.5) (100%, 100%);
  • transform: none; Cancel all

transition

role

  • Supplementary intermediate frame

grammar

  • Transition: Indicates the delay of the attribute name duration
  • transition: left 200ms linear
  • You can separate two different attributes with commas
  • transition: left 200ms, top 400ms
  • You can use all to represent all attributes
  • transition: all 200ms
  • Transition means has: linear | ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | | step – end steps

Pay attention to

  • Not all attributes can transition
    • Display: None => Block cannot transition
    • Visibility: hidden => visible
    • Difference between display and visibility
    • Background colors can transition
    • Opacity can be transitioned

animation

  • Declare keyframes
  • Add animation
#demo.start{
  animation: xxx 1.5 s forwards;
}

@keyframes xxx {
  0% {
    transform: none;
  }
  66.66% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(200px) translateY(100px); }}Copy the code

Abbreviation of grammar

animation: | | transition way long delay | | | times direction whether filling | | suspended animation;Copy the code
  • Duration: 1s or 1000ms
  • Transition mode: takes the same value as transition, such as Linear
  • 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