The animation principles

Animation is actually by a lot of still pictures continuous display, the use of human eye’s visual residual image illusion and mistaken for an active picture. Each of these still images is called a frame. In general, the more images per second, the smoother the animation.

Principles of Browser Rendering

The rendering steps may vary from browser to browser, but the general process is the same.

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Merge two trees into a single render tree
  4. Document flow, box model, calculated size, and location
  5. Paint the border color, text color, shadow, etc.
  6. Compose (display the screen according to the cascading relationship)



How does the browser render when page elements change?

The browser does not re-render all the elements of the page with modified properties as described above. To improve browser performance, there are three ways to re-render.

How do you know which properties will be rendered in which way?? It’s irregular. You can check it out on this website.

csstriggers.com/

CSS animations

Animation optimization

  • Js optimization: use requestAnimationFrame instead of setTimeout or setInterval
  • CSS optimization: Use Will-change or translateZ to elevate moving elements

These optimizations also do not have a certain rule, the specific content can see the following link

Developers.google.com/web/fundame…

transform

Commonly used functions

Inline elements do not support transform, and must first be converted to block translate(-50%,-50%) to absolutely center elements. Example: TansForm: scale(0.5) translate(-100%,-100%); transform: none; Cancel all animations

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

translate

You can move in three dimensions, and the value can be negative, which means you’re moving in the negative direction. When moving in the z-axis, specify perspective translateX translateY translateZ tansLate3D (x,y,z).

scale

Specify the scale. When using scale, the argument can be one, which means scaling in both x and y is less used because of ambiguity

  • scaleX
  • scaleY
  • scale(x,[y])

rotate

With rotate, a transformation that rotates around a fixed point (specified by the transform-Origin attribute) without morphing. Rotate (360deg) is used to rotate (360deg) to create a loading style

  • rotate
  • rotateZ
  • rotateX
  • rotateY
  • rotate3d

skew

Deg skewX skewY skew

transition

You can use this property to add a transition effect to the animation and not all properties can be transitioned

  • display: none; Cannot transition
  • Background colors can be transitioned
  • Opacity can be transitioned

Perhaps because the background color and transparency values are both numerical and quantifiable, they can be transitioned.

Abbreviation of grammar

Transition: Indicates the name of the transition attribute

The initial value



If the time parameter is a decimal point, the zero in front of the decimal point can be omitted

You can query specific parametersmdn

animation

The animation property can be used when the animation has multiple steps and it is cumbersome to use multiple transforms.

  1. The state of the animation is described using @keyFrames name {}
  2. The animation property is then used for animation transition assignment

@keyframes Complete syntax

  • One way to write it is from to
  • One way to write it is as a percentage

Animation abbreviated syntax

Animation: Duration | Transition mode | Delay | Number | Direction | Fill mode | Pause | Animation name;

The initial value



The Times can be defined as decimal cycles to play part of the animation cycle.

Transition is the same as transition.

You can query specific parametersmdn