CSS 知识总结

1.浏览器渲染原理

浏览器渲染的过程主要包括以下五步：

1. 浏览器将获取的HTML文档并解析成DOM树。
2. 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
3. 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
4. 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素。
5. 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

2.CSS 动画的两种做法

2.1 transition过渡

语法

transition: 属性名 | 时长 | 过渡方式 | 延迟
注意⚠️：指定第一个数字默认指定为时长，第二个数字默认才是延迟时间
拓展：1s = 1000ms（毫秒）

过渡方式

linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

常用的有：
linear 线性：动画会以恒定的速度从初始状态过渡到结束状态
ease 缓动：动画开始时逐步加速，中间逐渐减慢，结束时逐步加速
ease-in-out：动画开始时缓慢，中间逐步加速，结束时逐渐减慢

延迟

延迟多久时间后执行动画

2.2 animation动画

用法

声明关键帧
添加动画

声明关键帧

• 语法
  @keyframes 动画名{ }
• 标准写法
  from/to

  @keyframes 动画名 {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(100%);
    }
  }
  

  百分数 推荐

  @keyframes 动画名 {
    0% { top: 0; left: 0; }
    30% { top: 50px; }
    68%, 72% { left: 50px; }
    100% { top: 100px; left: 100%; }
  }
  

添加动画

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

  动画名 （animation-name）：指定执行某个动画。
  时长（animation-duration）：s 或者 ms。
  过渡方式（animation-timing-function）：与transition取值是一样的。
  延迟（animation-delay）：延迟多久时间后执行动画。
  次数（animation-iteration-count）：数字（3或者2.4）或者 infinite（无限循环）。
  方向（animation-direction）：normal 默认正常；reverse 相反方向；alternate默认正常方向循环（需要配合次数）；alternate-reverse默认相反方向循环（需要配合次数）
  填充模式（animation-fill-mode）；none 默认；forwards最后静止不动（保持最后一帧）；backwards （需配合延迟属性）立即应用第一个关键帧的样式，延迟结束后，执行动画both（forwards+ backwards相结合需配合延迟属性）立即应用第一个关键帧的样式，延迟结束后，执行动画，动画结束后保持最后一帧。
  是否暂停（animation-play-state）：running恢复运行动画；paused 暂停动画。