浏览器的渲染

步骤

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

CSS动画的两种做法

动画:由许多静止的画面（帧）构成

transition


代码练习地址

作用 ：补充中间帧

语法

transition:属性名 时长 过渡方式 延迟
transition：left 200ms linear
可以用逗号分隔两个不同属性
transition:left 200ms,top 400ms
可以用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
  • background颜色可以过渡
  • opacity透明度可以过渡

    animation


    代码练习地址
    animation MDN

声明关键帧，添加动画
  1. animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式

如何让动画停在最后一帧
  • 加上forwardds
  1.       #demo.start {
  2.         animation: 1.5s ease 1s infinite alternate forwards xxx;
  3.       }

display和visibility的区别

  • display不占据空间
  • visibility 占据空间

优秀笔记