1. 浏览器渲染原理

浏览器的渲染过程

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

2. CSS 动画的两种做法（transition 和 animation）

transition

主要用来补充中间帧

• 语法
• transition:属性名|时长|过渡方式|延迟; transition:left 200ms linear;
• 也可以用逗号分隔两个不同属性 transition:left200ms,top 400ms;

也可以用all代表所有属性

四个常用功能

• 位移 translate
• 缩放 scale
• 旋转 rotate
• 倾斜 skew 经验：
• 一般都需要配合transition过度
• inline元素不支持transform，需要先改变成block

试例

• transform: translate

  • translateX(像素(px) / 百分比(%))
  • translateY(像素(px) / 百分比(%))
  • translate(<像素 / 百分比>,<像素 / 百分比>？)
  • translateZ(像素) 且父容器加perspective
  • translate3d(x,y,z) 经验：
  • 多看MDN语法
  • translate(-50%,-50%)可做绝对定位元素居中

• transform: scale

  • scaleX(倍数)
  • scaleY(倍数)
  • scale(倍数，倍数) 经验：
  • 用的较少，容易出现模糊

• transform: scale

  • scaleX(倍数)
  • scaleY(倍数)
  • scale(倍数，倍数) 经验：
  • 用的较少，容易出现模糊

• transform: rotate

  • rotate( | )
  • rotateZ( | )
  • rotateZ( | )
  • rotateY( | )
  • rotate3d

• transform: skew

  • sskewX( | )
  • skewY( | )
  • skew( | )

• transform 可以组合使用

  • transform：scale（0.5）translate（-100%，-100%）；
  • transform：none；取消所有

• transition 过渡

作用

补充中间帧

语法

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

• transition: left 200ms linear

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

• transition: left200ms，top400ms

• 可以用all代表所有属性

• transition: 200ms

• 过度方式有： **linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具体含义

• display: none => block 不能过渡

• 要改成visibility: hidden => visible

• background 颜色可以过渡

• opacity 透明度可以过渡

animation

• animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名称;