The principle of animation

define

By many still pictures (frames), at a certain speed of continuous playback, the naked eye because of visual residue illusion, and mistakenly thought is the active picture.

concept

  • Frame: Every still picture is called a frame

  • Playback speed: fantastic 24 frames per second (video) or 30 frames per second (games)

Example 1: Use left to make a move

  • How it works: Every once in a while, move the div a short distance until you reach the target location

  • Note performance: Green indicates repaint. The CSS rendering process consists of layout, draw, and composit.Layout and draw can be ignored

Example 2: Use transform to make a move

  • Principle:

    Transformatex: translateX(0 => 300px) translateX: translateX(0 => 300px) translateX: translateX(0 => 300px) translateX: translateX(0 => 300px)

  • Left < transform < repaint

Principles of Browser Rendering

Google:

Render trees are built, laid out and drawn

Rendering performance

Use Transform to animate

What is triggered by viewing CSS properties

CSSTriggers.com

1:Google 2:firefox 3:safari 4:ie

Browser Rendering process

Steps:

  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 colors, text colors, shadows, etc

  6. (show the picture according to the cascading relationship)

The three trees

How to Update styles

JS is generally used to update styles

Div.style. background = ‘red’

For example, div.styyle.display = ‘none’

Such as div. ClassList. The add () ‘red’

Div.remove () simply removes the node

Three update methods

First, go all:

Div.remove () causes the current element to disappear and relayout.

Second, skip the layout

Change the background color directly to Repaint and Composite

Third, skip layout and paint

To change transform, only composite is needed

CSS Animation Optimization

Google Rendering performance

Use requestAnimationFrame instead of setTimeout or setInterval

CSS optimization

Use will-change or translate

transform

MDN

Four common functions

The displacement of the translate

Commonly used to write

  • translateX(<length-percentage>)

  • translateY(<length-percentage>)

  • translate(<length-percentage>,<length-percentage>?)

  • TranslateZ (

    ) and parent container perspective

  • translate3d(x,y,z)

experience

Translate (-50%,-50%) absolutely centers an element

The zoom scale

Commonly used to write

scaleX(<number>)

scaleY(<number>)

scaleZ(<number>,<number>?)

Experience:

Use easy to appear fuzzy

Rotate the rotate

Commonly used to write

rotate([<angle>|<zero>])

The default is to rotate by the z axis

rotateZ([<angle>|<zero>])

rotateX([<angle>|<zero>])

rotateY([<angle>|<zero>])

rotate3d

experience

Generally used for 360 degree rotation making loading

Tilt skew

Commonly used to write

skewX([<angle>|<zero>])

skewY([<angle>|<zero>])

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

Transform multiple effects

Use a combination of

Translate transfrom: scale (0.5) (100%, 100%)

transform: none; Cancel all

experience

  • I’m going to go with the transition

  • Inline elements do not support TansForms and must first become blocks

Beating heart

transition

role

Supplementary intermediate frame

grammar

Transition: Attribute name length transition mode delay (

Two different attributes can be separated by a comma

.

You can use all to represent all properties

)

transition: left 200ms linear 3s,top 2s; Or the transition: all 1 s;

The transition mode is linear

Linear, constant velocity

| ease

The buffer

| ease-in

Fade in

| ease-out

Fade out

| ease-in-out

Fade in and fade out

| cubic-bezier | step-start | step-end | steps

Pay attention to

Not all properties can be transitioned

Display :none => Block cannot transition

Limit: hidden => visible

Background and opacity can also be transitioned

Transition must have a beginning

Usually there’s only one animation, maybe two. Such as the transition between hover and non-hover states.

Transform twice

.a === transform ===> .b

.b === transform ===> .c

Use setTimeout or listen for transiTIONED events

animation

@keyframes Complete syntax

Writing a

@keyframes slidein{    from{        transform: translateX(0%);    }    to{        transform: translateX(100%);    }}
Copy the code

Write two

@keyframes identifier{    0% { top: 0; left: 0; }    30%{ top: 50px; }    68% , 72% { left: 50px; }    100%{ top: 100px; left: 100px; }}
Copy the code

Animation abbreviated syntax

Animation: | | transition way long delay | | | times direction whether filling | | suspended animation;Copy the code

Duration: 1s or 1000ms

Transition mode: The value is the same as transition, such as linear

Times: integer or decimal 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 separate attribute

To specify a single attribute, use the following syntax:

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Beating heart