1.浏览器渲染原理

1.1 步骤

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

2.1 三种更新方式

• JS/CSS—样式——布局——绘制——合成
• JS/CSS—样式——绘制——合成（没有改变元素位置大小等，只更改背景颜色等，不需要再次计算布局）
• JS/CSS—样式——合成（没有改颜色，也没有改位置大小等，不需要再次绘制和布局）

2.CSS 动画（transition 、tranform和animation）

2.1 transition过渡

2.1.1 定义

允许CSS值在一定的时间内平滑的过渡，需要事件（单击/获取焦点/失去焦点等）的触发，用于补充中间帧

2.1.2 语法

• transition：属性名 时长 过渡方式 延迟

transition:property duration | timing-function | delay
//实例
transition:left 200ms liner

• 可以用逗号分隔两个不同属性

transition:left 200ms,top 400ms

• 可以用all代表所有属性

transition:all 200ms

• 过渡方式
  linear 匀速过渡
  ease 开始和结束时缓慢
  ease-in 开始时缓慢
  ease-out 结束时缓慢
  ease-in-out 类似于ease，但幅度相较而言比较大
  cubic-bezier 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  step-start 直接位于结束处
  step-end 位于开始处经过时间间隔后结束

2.1.3 注意事项

• 并不是所有属性都可以过渡，例如display:none => blcok，需通过改成visibiity:hidden => visible解决
• 对于可以找到过渡规律的属性（例如background，opacity等），均可使用transition属性过渡
• 过渡必须要有起始

2.2 tranform转换

2.2.1 用途

• 向元素应用2d或3d转换，对元素进行运动移动、缩放、转动、拉长或拉伸
• 使用方法

transform: none|transform-functions;

2.2.2 属性

• transform:none：定义不进行转换

• transform:translate(x,y)：定义2d移动转换，x数值为横向移动转换，y数值为纵向移动转换

• transform:scale(x,y)：定义2d缩放转换，x数值为横向缩放转换，y数值为纵向缩放转换

• transform:rorate(旋转角度)：

.itemName {
//顺时针旋转45°，负值为逆时针旋转
    transform: rotate(45deg)
}

• transform:skew(x-angle,y-angle/角度)：定义沿着x轴和y轴的2d倾斜转换

//倾斜20°
.itemName {
    transform: skew(20deg)
}

• perspective(n):为 3D 转换元素定义透视视图。

*更多属性参考：
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function
W3C：https://www.w3school.com.cn/cssref/pr_transform.asp

2.3 animation动画

2.3.1 用途及使用方法

• 用于制作关键帧动画
• 使用方法：将属性写进需要动画的元素对应的css中，格式如下（按需添加对应属性即可）
• animaition：名称 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停

animation: name duration | timing-function | delay | iteration-count | direction | animation-fill-mode | animation-play-state

2.3.2 属性

• animation-name：规定需要绑定到选择器的keyframe名称

//ItemChange是自定义的名字，也是animation中name的值
@keyframes ItemChange {
    0% {
        width:50px;
    }
    50% {
        width:100px;
    }
    100% {
        width:150px;
    }
}

• animation-duration：规定动画所花费的时间（持续的时间），以秒或毫秒计算

• animation-timing-function：用于定义函数变化速度曲线，即过渡方式
  linear 动画从头到尾速度相同，即线性过渡
  ease 默认值，动画低速开始，随后加速，在结束前变慢
  ease-in 动画低速开始
  ease-out 动画低速结束
  ease-in-out 动画低速开始和结束
  cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

• animation-delay：规定动画开始之前的延迟，以秒或毫秒计算

• animation-iteration-count：表示动画的播放次数
  n 定义动画播放次数
  infinite 规定动画应该无限次播放

• animation-derection：规定是否反向轮流播放动画，即动画的播放方向
  normal：默认值，规定动画应该正常播放
  reverse：动画直接跳至结束，从结束处开始轮流播放
  alternate：规定动画应该轮流反向播放
  alternate-reverse：动画直接跳至结束，再从结束处开始往复交替轮流播放

• animation-fill-mode：规定了动画的填充模式
  none：默认值，不改变默认行为
  forwards：当动画完成后，保持最后一个属性值，定义在最后一个关键帧里
  backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
  both：向前和向后填充模式都被应用。

• animation-play-state：规定动画是否暂停
  paused：规定动画已暂停
  running：规定动画正在播放