CSS 知识总结

浏览器渲染原理

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

6. Compose合成（根据层叠关系展示画面）

   
   
   

   渲染.jpg

不同的属性，渲染流程不同

1. 全走一遍
   div.remove() 会触发当前消失，其他元素重新布局，再绘制合成
2. 跳过layout
   改变背景颜色，不需要再布局，直接绘制合成

3. 跳过layout、paint
   改变transform，只需重新合成

   
   
   

   三种更新方式.jpg

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

动画原理

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

transform

1. 四个常用功能

• translate 位移translateX(50%)，translateY(50%)，translate(50%,50%)，translateZ(50%)且父容器perspective，translate3d(x,y,z)
• scale 缩放scaleX(0.5)，scaleY(0.5)，scale(0.5, 0.5)
• rotate 旋转，一般用于360度旋转制作loading。
• skew 倾斜

2.经验

• 一般都需要配合transition过渡
• inline元素不支持transform，需要先变成block
• 组合使用transform: scale(0.5) translate(-100%,-100%)
• transform:none;取消所有
• translate(50%,50%)可做绝对定位元素的居中
• scale容易出现模糊

transition 过渡

1. 作用
   补充中间帧
2. 语法

• transition:属性名 时长 过渡方式 延迟（transitio:left 1s linear）
• 可以用逗号分隔两个不同属性（transition:left 1s，top 2s）
• 可以用all代表所有属性（transition:all 1s）
• 过渡方式有：linear/ease（默认的）/ease-in/ease-out/ease-in-out……
• 注意：并不是所有属性都能过渡
  display:none =>block无法过渡，一般改成visibility:hidden =>visible
background无法过渡，opacity透明度无法过渡
• 过渡必须要有起始，一般只有一次动画或者两次

3. 除了起始，还有中间点，怎么办？

• 使用两次transform
  .a === transform ===>.b
.b === transform ===>.c
  用setTimeout或者监听transitionend事件知道到中间点了
• 使用animation，声明关键帧，添加动画

animation 动画

1. 当有中间点时可以使用animation，需声明关键帧@keyframes，添加动画
   @keyframes两种写法
   一种是from to

@keyframes slidein{
          from{
            transform: translateX(0%);
           }
          to{
            transform: translateX(100%);
          }
}

一种是百分数

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

2. 语法
   animation: .5s heart infinite alternate-reverse;

• animation：时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
• 时长：1s或1000ms
• 过渡方式：跟transition取值一样
• 次数：3或2.4或infinite（无穷尽）
• 方向：reverse（相反）/alternate（轮流）/alternate-reverse（交替反转）
• 填充模式：none/forwards/backwards/both
• 是否暂停：paused/running

3.提问：如何让动画停留在最后一帧

• 搜索css animation stop at end
• 在animation后加一个forwards