Helllo hello! I’m Cathy Hersey. Today I want to talk to you about CSS animation. Come with me to fill in the gaps!

How browsers render

On this topic, I recommend that you read the article written by the Google team if you have time, because they make the browser. What better way to know a browser than to be a browser? Let me give you a brief summary here.

First we have to clarify two concepts 👇

  • The HTML document generates a DOM tree 🌲
  • The CSS document generates the CSSOM tree 🌲

Did you Get it? Then the browser should start rendering

  1. DOM and CSSOM trees are merged to form render trees.
  2. Layout according to the render tree (document flow, box model, calculated size and position);
  3. Paint (draw border colors, text colors, shadows, etc.)
  4. Composite (display images based on cascading relationships)

In summary, there are four steps above, and there are many things you can do for each step to optimize your browser rendering, which I won’t go into here. If you are interested, you can go to the Google website to read the relevant documentation at 😊

Two ways to animate CSS

What 😳? CSS can animate? Do white friends like me have a feeling that they will live for a long time? Yes, CSS does animate, and it’s pretty easy to do! There are two ways to do it

  • transition

    Transition means transition, and it’s used to complement intermediate frames. Since there is a middle, there must be an beginning. Yes, when you use transition you have to have a start. Basically, there’s usually one animation, maybe two. For example, the transition between hover and non-hover states.

    #heart{
transition: all 1s;
}
Copy the code

    Attribute name | duration | transition mode | delay. Use commas to separate two attributes. When you need to use it, go to the MDN document 📖

  • Animation means animation. We can make key frames to achieve the effect of animation.

    1. First of all use@keyframesTo declare a keyframeheart1;
    @keyframes heart1 {0% {transform: scale(1.0); } 100% {transform: scale(1.2); }Copy the code
    1. And then after you declare it, you put the keyframe nameheart1Just hang it in the selector you want to animate, useanimationProperties.
    #heart1 {
animation: heart1 500ms infinite alternate;
Copy the code

    The syntax inside the animation, it can add a lot of content, such as: duration | transition method | delay | times | direction | fill mode | and so on… Also consult the MDN documentation at 😊 if necessary

CSS Learning Experience

CSS is now a little bit over. CSS is a non-orthogonal science, so there are many things that cannot be inferred from common sense. What we can do is to discover new knowledge through constant experimentation.

So I’ll see you soon! See you next time 👋