CSS动画

浏览器渲染原理:

1. 浏览器渲染过程：
   根据HMTL创建HTML树（DOM）
   根据CSS创建CSS树（CSSOM）
   将两棵树合并成一颗渲染树（render tree）
   Layout布局（文档流/盒模型/计算大小和位置）
   Paint绘制（把边框颜色/文字颜色/阴影等画出来）
   Compose合成（根据层叠关系展示画面）

2. 三种渲染方式：
   （1）JS/CSS>样式>布局>渲染>合成
   例如：div.remove()会触发当前消失，其他元素relayout
   （2）JS/CSS>样式>渲染>合成
   例如：div.style.background,直接repaint+composite
   （3）JS/CSS>样式>合成
   例如： transform:translate(10px),只需要composite

CSS 动画的两种做法（transition 和 animation）

1. transition 过度
   作用：补充中间帧
   用法：transiton:属性名 时长 过度方式 延迟时间

transition:left 200ms linear;
transition:left 200ms ease,top 400ms ease-in;
transition:all 200ms linear 1s;

注意：并不是所有属性都能过渡例如：display:none=>block没有办法过渡，一般改为
visibility:hidden=>visible；

2. animation
   用法：（1） 声明关键帧；

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

 @keyFrames identifier{
         0%{
             transform:translateX(0%);
         }
         30%,60%{
             transform:translateX(100px);
         }
         100%{
             transform:translateX(200px);
         }
     }

（2）添加动画
缩写语法：animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

    #demo{
        animation：200ms linear 1s inifite alternate none running identifier;
    }

以上所有属性都有对应的单独属性。