css动画及浏览器渲染原理

1 浏览器渲染原理

1.1 步骤

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合成一颗渲染树（render tree）
4. Layou布局（文档流，盒模型，计算大小，位置）
5. Paint绘制（把边框颜色，文字颜色，阴影等画出来）
6. Composite合成（根据层叠关系展示画面）

1.2 用JS更新样式

有三种不同的渲染方式：

1. JS/CSS>样式>布局>绘制>合成
2. JS/CSS>样式>绘制>合成
3. JS/CSS>样式>合成
   可以浏览：JS渲染方式了解改变每个属性更新的渲染方式。

2 CSS动画

2.1 transform

一共有四个常用的功能：

1. translate 位移
2. scale 缩放
3. rotate 旋转
4. skew 倾斜

2.1.1 translate

• translateX() 左右平移
• translateY() 上下平移
• translateZ() 垂直屏幕平移
  Tip:
  利用translate左右居中：

left:50%;
transform:translateX(-50%);

2.1.2 scale

• scale() 整体缩放
• scaleX() 水平方向上缩放
• scaleY() 垂直方向上缩放
  Tip：
  较少使用，因为容易出现模糊

2.1.3 rotate

写法rotate(xxdeg)就是在平面上沿着视点（viewpoint）向右旋转。
也可以有rotateX()与·rotateY()，分别是沿水平方向向屏幕内旋转，沿着垂直方向向屏幕内旋转的意思，但是用的很少。

2.1.4 skew

倾斜，可以沿着水平方向倾斜：skewX(deg)；沿着垂直方向倾斜skew(deg)
Tip:几乎没人使用

2.1.5 transition过渡

作用：自动补充中间帧
语法：
transition: 属性名 时常 过渡方式 延迟

• 属性名：可以用 , 分隔两个不同的属性：

transition:left 200ms , top 1000ms

也可以用all代表所有的属性

• 过渡方式：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/step-start/step-end/steps
  分别对对应不同的数学函数模型，点击详细了解transition-timing-function。

2.2 animation

语法：

{animation: xxx 1.5s linear infinite}
@keyfram xxx{
    0%{transform:translateX(50%)
    }
    100%{transform:rotate(50deg)
    }
}

1. animation 里面的值分别为：keyfram的名称/过渡方式/次数/方向/填充样式/是否暂停

2. @keyframe xxx 里面的内容为进行到什么时间点，进行什么动画

   ---

• 过渡方式：和transition一样
• 次数： 1，2，3，1.2，infinite
• 方向：reverese 反过来 ； alternative 交替的 ； alternative-reverse 开始反过来然后交替
• 填充模式： none/forward/backwards/both
• 是否暂停：可通过设置按钮：

xxx.onclick=()=>{
    demo.style.animationPlayState='paused'/'running'
}