浏览器渲染原理

• 根据html构建HTML树(DOM)
• 根据css构建css树(CSSOM)
• 合并成渲染树(rander tree)
• Layout布局（文档流，盒模型，计算大小和位置）
• Paint绘制 （边框,文字颜色，阴影）

• composite合成 （根据层叠关系展示页面）

  transition

• 作用：补充中间帧

• 语法：
  • transition: 属性名 时长 过渡方式 延迟
  • 过渡方式：linear(线性)，ease，ease-in，ease-out
  • 不支持display:none —>block(脱离文档流，重拍重绘); 用Visibilite:hidden —>visible(不脱离文档流，只重绘)
• 优点：比left性能更好，不重排重绘，直接合成

animation

• 语法：
  • animation:名称 时长 过渡方式 延迟 填充模式 次数 方向
    • animation-name
    • animation-duration
    • animation-timing-function：linear ，ease
    • animation-delay
    • animation-fill-mode：forwards(停在最后一帧)
    • animation-iteration-count ：infinite
    • animation-direction: alternate(交替)，reverse(颠倒)
    • animation-play-state: running(运行)，paused(停止)
  • @keyframes name {0%{transform:}

100%{transform:} }