There are three ways to animate

1. Set the left

JS code:

var n = 1
var id = setInterval(() = > {
  console.log(n)
  if (n <= 50) {
    demo.style.left = n / 100 * 300 + 'px'
    n = n + 1
  }else{
    clearInterval(id)
  }
}, 1000 / 30)
Copy the code

Use timer to constantly change the value of left to achieve animation

By using Transform + Transition

Use the Transform property translateX to do the transition.

#demo {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: all 1s;
}
#demo.run{
  transform:translateX(100px);
}
Copy the code

3.animation

The core of animation is to define key frames, which can be written in two ways:

#demo{
    animation:run 1s;
}
@keyframes run {
  from {transform:none; }to {transform:translateX(100px); }} or@keyframes run {
  0 {transform:none; }100% {transform:translateX(100px);}
}
Copy the code

Transition

Usually add the following attribute property name | duration | timing function | delay to transition properties | cost curve | | movement event when to start Who make the transition to add, if you want to add transition to multiple attributes, Not all attributes can be transitioned. For example, display:block becomes display: None and use visibility: Visible to hidden. Background colors and colors can be transitioned, as can transparency, but this element still takes up space and is not recommended.

Animation note points

Keyframes Animation property

animation: run 2s linear 1s infinite alternate;
/ * animation cycle time | | animation speed curve of the default ease when start | | plays the default whether | 1 time in the next cycle reverse playback, the default normal * /
Copy the code

You can change the animation-play-state property to control whether the animation is running or paused. The default value is RUNNING, which can be changed to pause. You can change the animation-fel-mode property to specify the state after the animation is finished

Browser rendering process and principles

  1. Build a DOM tree based on HTML tags
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine the two trees into a render tree
  4. Document flow, box model, calculated size or location, etc.
  5. Paint (border color, background color, shadow, etc.)
  6. Compose (display screen according to cascade relationship)

Three ways to update styles

According to the browser’s rendering principle, if the developer updates the style (i.e. the geometry of the element, such as width, height, position, etc.), the browser will check all the attributes and redraw them before compositing them. JS/CSS > Styles > Paint > Composition if the developer updates the paint Only properties (such as the background, text color, etc.), the browser will perform the paint directly since it does not affect the layout of the page. The browser will only perform compositing, such as animation and Transform, when the developer simply changes a property that neither changes the layout nor needs to be drawn. You can check the different procedures triggered by different CSS properties using the following url: csstriggers.com/