How browsers render

When a browser renders a page, there are several steps:

  1. Building an HTML Tree from HTML (DOM)
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine the above two trees into a Render Tree.
  4. Layout (size and position according to document flow and box model)
  5. Do Paint (content, color)
  6. Perform the Compose composition (presented in cascading order)

CSS animation methods, generally can be summarized as transition and animation.

Before I introduce these two methods, I’ll introduce one very important property, transform.

transform

The transform property allows elements to translate, scale, rotate, tilt, etc. (this does not apply to inline elements).

Common values for the transform property are

  1. translate()

You can shift the elements

transform: translateX(50px)               /* Pan it 50px to the right */
transform: translateY(50%)                /* Pan down 50% of its height */
transform: translate(20px, 20px)          /* Pan it to the right and down 20px */
Copy the code
  1. scale()

Scale the element

transform: sacleX(1.2)                     /* Width enlarged to 1.2 times of original */
transform: sacle(1.2)                      /* Width and height are enlarged by 1.2 times */
Copy the code
  1. rotate()

Rotate the element

transform: rotate(60deg)                   /* Rotate 60 degrees clockwise */
Copy the code
  1. skew()

Skew the elements

transform: skew(45deg)                     /* Tilt 45 degrees */
Copy the code

Now that you know the basic usage of Transform, you’re ready to animate elements.

I’m going to animate this with Transition

Transition means transition, and if you specify the end of an action, transition automatically adds a transition effect. For example,

div{
  height: 50px;
  width: 50px;
  border: 1px solid red;
  transition: transform 1s linear;
}
div:hover{
  transform: rotate(45deg);
}
Copy the code

When the mouse hover, the div will rotate 45 degrees clockwise instead of its default. Transition takes 1s to complete, with an automatic animation added.

The values of transition include the attribute name, duration, transition mode, and delay time, which are generally required.

  • Attribute name specifies the attributes to be transitioned. All indicates all attributes
  • Transition mode refers to the progression-time function model followed to complete the transition, such as constant speed, fast then slow, slow then fast, etc. The CSS provides a variety of function models, such as Linear, ease, ease-in, and ease-out.

Note that not all attributes support transitions, such as display: none–>display: block changes do not support transitions, and similar requirements can be used to use visibility: hidden–>visibility: visible.

Use animation to implement animation

The Transition animation can only specify two states of change, the beginning and the end. The process in between is controlled by mathematical functions, while the animation can specify multiple key frames, which is more flexible.

The core of animation is to define keyframes. The syntax @keyframes is used here, which is written as follows

@keyframes xxx{
    0% {style 1}10% {style 2}40% {style 3}...100%{style 4}}Copy the code

or

@keyframes xxx{
    from{style 1} to {style 2}}Copy the code

XXX is the animation name.

Once you have declared the keyframe, you can apply the animation to the element using the animation property

div{
    animation: xxx 1s infinite alternate-reverse; 
}
Copy the code

The value of animation includes the animation name, duration, transition mode, delay, times, direction, etc. For specific usage, see animation