内容包括： 浏览器渲染原理 CSS 动画的两种做法（transition 和 animation）

浏览器渲染原理

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

CSS 动画

transform

作用：变形

• 4个常用功能
  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew

translate

常用写法（功能：移动）

• X/Y 轴

  • translateX(移动的像素，例如200px)
  • translateY(移动的像素，例如200px)
  • transform : translateX/Y(50px);
  • xy缩写transform : translate(50px，50px）;

• Z 轴 （垂直于屏幕方向）

  • 需要有个视点，既参考的点

#demo:hover{
    tranform:translateZ(0px);
}
.warper{
    perpective:1000px; //在这个边框内 1000像素，既中心点
    border 1px solid black;
}

• translateZ(移动的像素，例如200px，这个值小离视点近，大离视点远)
• xyz缩写transform : translate3d(50px，50px,200px）;

绝对居中的完美答案

left:50%;
top:50%;
transform:translate(-50%,-50%);

scale

功能：缩放

• 用的比较少，因为容易出现模糊
• XY轴也适用 transform:scaleX/Y(1.5(倍数))

rotate

功能：旋转，默认以垂直屏幕的轴转动

• 一般用于360度旋转制作loading
• XY轴也适用 transform:rotate(180deg)

skew

功能：倾斜

• XY轴也适用 transform:skewX/Y(180deg)

可以组合使用，用的时候空格隔开

• transform:scale(0.5) translate(-100%,-100%);
• transform:none; 取消所有

transition

作用：过渡，补充中间帧，（给了开头和结束，中间补充时间）

• transition:(有四个属性值：属性名 时长 过渡方式 延迟)
• 过渡方式：linear匀速、ease缓动（默认值），ease-in淡入，ease-out淡入，ease-in-out淡入而且淡出
• 延迟 过多久开始动画 transition:all 1s ease-in-out 3s

不能过渡

• 不是所有都能过渡
• display:block==>display:none;图像直接变不见（过渡的时候不要用）

缓慢消失

• visibility:visible==>visibility:hidden 最后让它不见，但是占位置
• opacity:1==>opacity:0;(看不见但实际上还存在，结束后移除)

注意

• 过渡必须有开始跟结尾
• 一般只有一次或两次动画，进去和出去

animation（过渡）

• 步骤

  • 先声明关键帧（@keyframes）
  • 添加动画（将animation添加到一个元素上）

• 将动画停在最后一帧，加个forwards

  • animation:xxx 1.5s forwards;

• @keyframes语法和animation语法

  • animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；
  • 次数：1或3，或inifinite(无限次)
  • 过渡方式：linear匀速、ease缓动（默认值），ease-in淡入，ease-out淡入，ease-in-out淡入而且淡出
  • 方向：reverse反过来(最后往前)|alternate(交替)|alternate-reverse
  • animation: 1.5s ease 1s ininite reverse forwards xxx;

#xxx{
animation: 1s  xxx xxx alternate;
}

@keyframes xxx {
0% { transform: scale(1.0); }
100% { transform: scale(1.5);}
}