《CSS 知识总结》

1. 动画

• 定义
  由许多静止的画面（帧）；
  以一定的速度（如每秒30张）连续播放时；
  肉眼因时间残象产生错觉；
  而误以为是活动的画面。
• 概念
  帧：每个静止的画面都叫做帧；
  播放速度：每秒24帧（影视）或者每秒30帧（游戏）。

2. 浏览器渲染原理

渲染过程

• DOM 树与 CSSOM 树合并后形成渲染树。
• 渲染树只包含渲染网页所需的节点。
• Layout布局计算每个对象的精确位置和大小。
• Paint绘制，使用最终渲染树将像素渲染到屏幕上。
• Compose 合成 （根据层叠关系展示画面）

  

三种更新方式

• 第一种，全走
  div.remove() 会触发当前消失
• 第二种，跳过 layout
  改变背景颜色，直接 repaint+composite
• 第三种，跳过 layout 和 paint
  改变 transform ,只需 composite

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

transition 过渡

• transition CSS 属性是transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
• 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
• 语法
  transition: 属性名 时长 过渡方式 延迟。
  transition: left 200ms linear。
  可以用逗号分隔两个不同属性。
  transition: left 200ms, top 40ms。
  可以用 all 代表所有属性。
  transition: all 200ms。
  过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps，具体含义要靠数学知识。
• 并不是所有属性都能过渡
  display : none => block 没法过渡
  一般改成 visibility : hidden => visible

animation

• 缩写语法
  animation : 时长 | 过渡方式 | 延迟 | 次数 | 方式 | 填充模式 | 是否暂停 | 动画名
  时长：1s或者100ms；
  过渡方式：跟transition取值一样，如liner；
  次数：3或者2.4或者 infinite；
  方向：reverse | alternate | alternate-reverse;
  填充模式：none | forwards | backwards | both;
  是否暂停：paused | running;
  以上所有属性偶读有对应的单独属性

• @keyframes完整语法
  标准写法
  一种写法是 from to;
  一种写法是百分数；