浏览器渲染

步骤：

根据HTML构建HTML树

根据CSS构建CSS树

将两棵树合并成一颗渲染树

layout布局（文档流、盒模型、计算大小和位置）

paint绘制（边框颜色、文字颜色、阴影等）

compose合成

transition

作用：补充中间

语法：transition: 属性名丨时长丨过渡方式丨延迟

可以用逗号分隔两个不同的属性：transition:left 200ms,top 400ms

可以用all代表所有属性：transition:all 20ms

过渡的方式有：linear丨ease丨ease-in丨ease-out丨ease-in-out

注意：不是所有属性都能过度

display:none => block没办法过度

一般使用visibility:hidden => visible

过度必须要有起始 除了起始还需要中间点

animation

@keyframes 完整语法

from to:@keyframes slideli{
           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%}
}

缩写语法

animation:时长丨过渡方式丨延迟丨次数丨方向丨填充模式丨是否暂停丨动画名

• 时长：1s或者100ms

• 过渡方式：和transition一样

• 次数：3或2.4或infinite

• 方向：reverse丨alternate

• 是否暂停：paused丨running

感想

• 写了absolute 一定要写relative

• animation一定要按照语法写 最后加上动画名