CSS动画

浏览器渲染过程

步骤：

1.根据HTML构建HTML（DOM）树

2.根据CSS构建CSS（CSSOM）树

3.将两棵树合并成一棵渲染树（render tree）

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

5.Paint绘制（把边框颜色、文字颜色、阴影部分等画出来）

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

JS三种更新方式：

1.JS/CSS > 样式  > 布局 > 绘制 > 合成（全走）（当前元素被删除 其他的元素layout）

       JavaScript > Style > Layout > Paint > Composite

2.JS/CSS > 样式  > 绘制 > 合成（跳过layout）（改变背景颜色）

      JavaScript > Style > Layout > Paint > Composite

2.JS/CSS > 样式 >  合成（只需要composite）（改变transform）

      JavaScript > Style > Layout > Paint > Composite

transition过渡

作用

补充中间帧

语法

transition：属性名 时长 过渡方式 延迟

transition：left 200ms linear

可以用逗号隔开

transition：left,200ms,linear

可以用all代表所有属性

transition：all 200 ms

过渡方式：linear    ease   ease-in   ease-out    easein-out

cubic-bezier   step-start   step-end   steps

具体属性看：transition.MDN

注意

并不是所有属性都能过渡

display：none=>block没法过渡 

一般改成visibility：hidden=>visible

animation

添加关键帧

#demo.start{
   animation:xxx 1.5s
}

@keyframes xxx{
  0%{
      transform:none;
    }
  60%{
    transform:translateX(150px)
     }
  100%{
       transform:translateX:（100px）;
       transform:translateY:（200px);
    }
}

@keyframes完整语法

from to

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

百分数

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

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

时长:1s或者1000ms

过渡方式：跟transition取值一样，如liner

次数：3或者2.4或者infinite(无限

方向：reverse(反过来) | alternate（交替）| alternate-reverse

填充模式：none |  forwards（到最后不返回）| backwards | both

是否暂停：pause | running   

时长:1s或者1000ms

具体看：animation.MDN