有三种方式用来实现动画

1.通过设定left

JS代码：

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)

用定时器不断改变left的值来实现动画

通过用transform + transition

使用transform属性里的translateX来完成移动，然后加上transition的过渡效果。

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

3.animation

animation的核心是定义关键帧，两种写法：

#demo{
    animation:run 1s;
}
@keyframes run {
  from {transform:none;}
  
  to {transform:translateX(100px);}
}
或者
@keyframes run {
  0 {transform:none;}
  100% {transform:translateX(100px);}
}

transition过渡的注意点

animation注意点

关键帧keyframes
animation属性

animation: run 2s linear 1s infinite alternate;
/*动画名|动画周期时间|速度曲线默认ease|何时开始|播放次数默认1次|是否在下个周期逆向播放，默认normal*/

可以修改animation-play-state属性控制动画是否正在运行或暂停，默认running，可改为pause,可修改animation-fill-mode属性规定动画结束后的状态，保持forwards回到起始backwards

浏览器渲染过程和原理

根据HTML标记并构建DOM树
根据CSS构建CSS树（CSSOM）
将两棵树合并成一棵渲染树（render tree
layout布局（文档流，盒模型，计算大小或位置等）
paint绘制（边框颜色，背景颜色，阴影等绘制）
compose合成（根据层叠关系展示画面）

更新样式的三种方式

1.JS / CSS > 样式 > 布局 > 绘制 > 合成
根据浏览器的渲染原理，若是开发者更新了样式（即元素的几何属性，类似于宽高，位置等），则浏览器会检查所有属性然后重新绘制，最后再合成。之前用到的改变left法，就会每次都让浏览器重新布局、渲染和合成
2.JS / CSS > 样式 > 绘制 > 合成
如果开发者只是更新了paint only的属性（例如背景，文字颜色等），由于不影响页面布局，则浏览器直接执行绘制。
3.JS / CSS > 样式 > 合成
在开发者只是更改一个既不更改布局也不需要绘制的属性时，浏览器将只执行合成，例如动画(animation)和transform。
可以用以下网址查询不同的CSS属性会触发的不同过程：
csstriggers.com/

CSS动画