CSS animations

How animation works

It is defined as: there are a lot of still pictures (frames), at a certain speed (such as 30 /s) continuous playback, the naked eye due to the visual image of the illusion, and mistakenly considered as a moving picture.

The concept of frame

Frame refers to each still picture. The playback speed of general film and television works is 24 frames /s. Due to the requirements of animation picture quality in games, the minimum for the easiest game is 30 frames /s.

Let’s take a simple example to describe CSS animation: moving a DIV from left to right. How it works: Every time (using setInterval), move the div some distance until it reaches the target point.

The first method: relative positioning of demo, using left movement, using setInterval function.

<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <style> #demo{ width: 100px; height: 100px; border: 1px solid red; position: relative; left: 0; } </style> </head> <body> <div id="demo"></div> <script> var n = 1 var id = setInterval(() => { if (n <= 200) { demo.style.left = n + 'px' n = n + 1 } else { clearInterval(id) } }, 1000 / 60) </script> </body> </html>Copy the code

Note: drawing the render module in the developer tools found that the div was constantly rendering during the move, which was not good performance. How do I view renderings in developer tools? A: First open the developer tool — press ESC on any option, a console appears, click “┇” in the upper left corner of the console, select “Rendering” and select the first “Paint Flashing” to display the Rendering — show green.

supplement

How browsers render:

How to do it: ———— Three trees

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

How do YOU update the style? A: We usually use JS to update styles

Such as:

div.style.backgroung = ‘red’; Change the background to red

div.style.display = ‘none’; To hide

Div. Classlist. add = (‘red’) Adds a ‘red’ class. General expert is only add class, no style.

Div.remove () removes the node directly

The differences between the three update methods

  1. JS/CSS > Styles > Layout > Draw > Composition

Example: div.remove() will trigger the current disappearance of other elements relayout.

  1. JS/CSS > Styles > Draw > Composition

Example: Change the color of the background. Repaint + recompose directly

  1. JS/CSS > Styles > Composition

Example: Change transform, just composite. Note that the effect must be viewed in full screen mode, there are bugs in iframe.

You can check out csStriggers.com to see how all the properties flow.

CSS Animation optimization

So we’re just going to give you a couple of ways that we can do this. The specific optimization content, I will give a separate article to talk about.

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

Translate renders with no relayout or repaint, only the initial style and the final composition. Much better than left.

Properties commonly used in CSS animations

tranform

Transform has four common functions:

  1. Translate – displacement
  2. Scale – zoom
  3. Rotate, rotate
  4. Skew tilt –

Translate is written as follows:

  • TranslateX () — right minus left
  • TranslateY () — up and down
  • TranslateZ () — near and far
  • translate(x,y)
  • translate3d(x,y,z)

Matters needing attention:

  1. Learn to understand the syntax format of MDN documents
  2. Absolute middle
.wrapper{
position:relative;
height:100px;
}
.x{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
Copy the code

scale

Scale can be written as follows:

  1. ScaleX () — scales on the X-axis
  2. ScaleY () — scales on the Y-axis

Scale is used sparingly, because it causes the image to blur.

rotate

Rotate is written as:

  1. RotateX () — rotation around the X-axis
  2. RotateY () — rotation around the Y-axis
  3. RotateZ () — rotation around the z-axis
  4. rotate()

skew

Usage:

  1. SkewX () — rotates around the X-axis
  2. SkewY () — rotates around the Y-axis
  3. skew()

The above mentioned rotate and Skew are needed and then you can check the MDN document. Multiple effects can be implemented using combinations: transform:scale(0.5) translate(100%,100%);

Transform: None: Cancel all

transition

The transition

Effect: Replenishes intermediate frames

Syntax: Transition: Attribute name Duration Delay of the transition mode

  1. Transition :left 20ms,top 400ms;
  2. You can use all to represent all attributes.
  3. There are many ways to transition:
  • Linear, linear
  • Ease — Fast before slow
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier
  • step-start
  • step-end
  • steps

Matters needing attention:

  1. Not all attributes can be transitioned. Such as:display:none= >display:blockYou can’t transition. We usually change it tovisibility:hidden= >visibility:visible.
  2. Transitions must have a start, one or two animations.
  3. If the animation has a point in the middle that needs to move twice, how to achieve this?
  • Tranform is used twice, with a transform from A to B and a transform from B to C.
  • The use of animation.

animation

Grammar:

  1. Declare keyframes
  2. Add animation

Such as:

  1. form to
@keyframes slidein{
        form{
    transform:translate(0%);
        }
        to{
    transform:translate(100%)
        }
   }
Copy the code
  1. The percentage of
@keyframes identifier{ 0%{top:0; left:0; } 30%{top:50px; } 68%,72%{left:50px; } 100%{top:100px; left:100%; }}Copy the code

Added: How to get animation to stop at the last frame: Add a forward to the animation.

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. Number of times: 3 or 4 or infinite
  4. Direction: the reverse (back) | alternate (return) | alternate – reverse (from tail end to return)
  5. Filling pattern: none | recently (forward) | backwards | to both
  6. Whether to suspend: paused (pause) | running (run)

All of the above attributes have their respective attributes, which can be found in the MDN documentation.