12.【CSS】动画1.动画的原理FPS=60，一秒内播放60帧（60个静止的画面），构成1秒的动画2.浏览器渲染原理浏

1.动画的原理

FPS=60，一秒内播放60帧（60个静止的画面），构成1秒的动画

2.浏览器渲染原理

浏览器在获取到HTML和CSS后，做了什么？

根据HTML构建HTML树（DOM树）
根据CSS构建CSS树（CSSOM）
将两棵树合并成一棵渲染树（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Compose合成（根据层叠关系展示画面）

3.如何更新样式？

一般用JS来更新样式

div.style.background="red"实际中一般不用这种写法
div.style.display="none"
div.classList.add("red")
div.remove()直接删除节点

3种不同的渲染方法

JS/CSS > 样式 > 布局 > 绘制 > 合成
JS/CSS > 样式 > 绘制 > 合成（不需要再布局，元素的位置和大小没变）
JS/CSS > 样式 > 合成（没有改颜色、位置和大小）

3种更新方式

JS/CSS > 样式 > 布局 > 绘制 > 合成，全部走一遍，比如div.remove()（当前元素消失，其他元素都重新布局）
JS/CSS > 样式 > 绘制 > 合成，比如改变背景颜色
JS/CSS > 样式 > 合成，比如改变transform

如何查看某属性的渲染方式，走了几个步骤

csstriggers.com/

4.transform属性极其取值

translate（常用）

用于让元素位移

div:hover {
    transform:translateX(100px);
}

鼠标悬浮到元素上时，元素向X方向（右方）移动100个像素
解释transform:translateZ(100px);的用法

scale（用得很少）

元素的缩放

div:hover {
    transform:scale(1.5);
}

元素变大为原来的1.5倍

rotate（一般只用于loading图标）

元素的旋转

div:hover {
    transform:rotate(45deg);
}

元素顺时针旋转45°

倾斜（用得很少）

5.CSS动画实例：跳动的心

代码展示
主要用到属性transform、position、transition
html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="love">
    <div class="left">
      
    </div>
    <div class="right">
      
    </div>
    <div class="bottom">
      
    </div>
  </div>
</body>
</html>

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.love {
  margin:100px;
  position: relative;
  transition:all 1s;
  display:inline-block;
}

.love:hover {
  transform:scale(1.2);
}

.love>.left {
  height:100px;
  width:100px;
  position: absolute;
  bottom:100px;
  right:100px;
  transform:rotate(45deg) translate(90px);
  border-radius:50px;
  background-color:red;
}

.love>.right {
  height:100px;
  width:100px;
  position: absolute;
  bottom:100px;
  left:100px;
  transform:rotate(-45deg) translate(-90px);
  border-radius:50px;
  background-color:red;
}

.bottom {
  height:100px;
  width:100px;
  left:0;
  top:0;
  transform:rotate(45deg);
  background-color:red;
}

6.transition属性详解

作用：补充中间帧
用法：transition:属性名时长过度方式延迟;

12.【CSS】动画