浏览器的渲染过程

浏览器的渲染过程通常分为四步:

  1. 根据 HTML 构建 HTML树(DOM)
  2. 根据 CSS 构建 CSS 树(CSSOM)
  3. 将HTML和CSS树合并成渲染树(render tree)
  4. 根据文档流, 盒模型, 计算元素的大小和位置, 进行布局(layout)
  5. 把边框颜色, 文字颜色, 阴影等画出来, 称为绘制(painting)
  6. 根据层叠关系, 合并图层, 展示画面, 称为合成(composite)

    如何观察渲染过程

    打开 chrome 控制台, 在选项中选择 rendering 选项, 勾选 paint flashing , 在画面重新渲染时就会出现绿色的闪烁了.

    CSS 动画

    transform 变形

    transfrom 用来是元素基于原来的形状发生各种变化, 常用的有translate(位移), scale(缩放), rotate(旋转)和 skew(倾斜)四种属性. 用 transform 控制的形变过程只在结束时产生一次额外渲染, 性能表现较好. 不能用于 inline 元素.

    translate 位移

    语法: ```css /单个值/ transform: translate(100px); transform: translate(50%); transform: translateY(50%);

/多个值/ transform: translate(200px, 100px);

  1. `translate` 一般用来使元素相对于原位置沿x 或y 轴偏离, 比如可以用 `transform` 使子元素在父元素中做绝对定位的居中.
  2. ```css
  3. left: 50%;
  4. top: 50%;
  5. transform: translte(-50%, -50%);

translate 也可以指定沿着z轴位移, 此时需要在父容器中指定一个 perspective (视点), 比如:

  1. perspective: 1000px;

此时会以元素中心点所在平面下方 1000px 处作为视点, 来观察元素的位移.

rotate 旋转

使用 rotate(45deg) 使元素图形顺时针旋转45度. 默认沿z轴旋转, rotateZ(45deg) . 语法:

  1. transform: rotate(90deg);
  2. transform: rotate(0.25turn);
  3. transform: rotate(1.57rad);

可以指定x 或y 轴旋转, transform: translteX(45deg) 使其沿横轴旋转.
还可以用rotate3d 使元素图形在3D空间中转动, 用的比较少.

scale 缩放

使用 scale(1.5) 使元素整体放大 1.5倍. 语法:

  1. transform: scale(1.5);
  2. transform: scaleX(2);
  3. transform: scaleY(0.5);
  4. transform: scale(2. 0.5);/*横向拉伸一倍, 纵向收缩到一半*/

需要注意的是, 放大倍数大时, scale 容易使元素表现模糊.

skew 倾斜

skew值 可以使元素在平面内倾斜, 即向一边倒. 常见用法:

  1. transform: skew(15deg); /*使元素向右倾斜15度*/

transition 过渡

transition 属性用来控制元素在不同状态之间切换时的过渡效果, 比如伪元素 :hover, :active 或 js 实现的状态变化. 语法: 

  1. transition: [属性名] [过渡时间] [过渡方式] [延迟时间]; /* 多个属性的过渡可以用 "," 分隔 */
  2. transition: all 2s ease .5s;

第一项可选值:

  • 属性名
  • none
  • all, 表示控制所有过渡

过渡方式:

  • ease / ease-in-out 这两个很接近, 都是淡入淡出效果
  • linear 线性变化, 匀速
  • ease-in 淡入(先慢后快)
  • ease-out 淡出(先快后慢)

  • 数学函数

    适用范围(注意事项)

  • 要想要一个元素慢慢消失, display: block ==> none不适用, 可以用 hidden ==> visibility来代替

  • background 背景色是可以过渡的, 实际上是 rgb 数值在变化.
  • opacity: 1 == 0 也是可以过渡的, 但是用的很少
  • 使用过渡动画时必须保证这个元素有开始和结束两种状态

    animation 动画

    相比于 transition, animation 配合 [@keyframes](#) 可以指定起始两个状态中间的多个点, 实现更丰富的动态效果.

    keyframes 关键帧

    [@keyframes](#) 用于在两个节点之前插入状态点, 有两种形式.

第一种用 from 到 to 的形式, 与 transition 十分相似

  1. @keyframes xxx {
  2.   from{
  3.       [初始状态]
  4.   }
  5.   to{
  6.       [结束状态]
  7.   }
  8. }

第二种用百分号表示插入的节点在起始节点中间的位置, 可插入多个

  1. @keyframes yyy {
  2.   0% {
  3.       [初始状态]
  4.   }
  5.   60%{
  6.       [中间状态1]
  7.   }
  8.   80%{
  9.       [中间状态2]
  10.   }
  11.   100%{
  12.       [结束状态]
  13.   }
  14. }

animation 属性

用 animation 来创建一个动画, 动画名属性值要与 [@keyframes](#) 中的动画名要保持一致. 语法:

  1. animation: [动画名] | [时长] | [过渡方式] | [延迟] | [次数] | [方向] | [填充数量] | [是否暂停] ;

常见取值:

  • 方向: reverse / alternate(来回变) / reverse-alternate. 其中 alternate 很适合做加载动画.
  • 次数: 1 / infinite(无限次) / 2.4(小数也是可以的)
  • 填充方式: none / forwards(动画完成后停在最后一帧) / backwards / both
  • 暂停与否: paused(已暂停) / runing(运行中) . 这里配合js事件可以做成控制暂停播放的按钮.