动画

实质是有许多静止的画面(帧)以一定的速度连续播放时组成

浏览器渲染过程

• 根据HTML构建HTML树(DOM)
• 根据CSS构建CSS树(CSSOM)
• 将两颗树合并成一颗渲染树(rneder tree)
• Layout布局(文档流 盒模型 计算大小和位置)
• Paint绘制(把边框颜色 文字颜色 阴影等画出来)
• Compose合成(根据层叠关系展示画面)

更新样式

有三种不同的渲染方式

三种样式:

1. js/css>样式>布局>绘制>合成

   

2. js/css>样式>>绘制>合成

   

3. JS / CSS > 样式 > 合成

   

查看每个属性触发的流程 csstriggers.com/

transform

• 位移 translate

tranfrom:translateX(x);
         translateY(y);
         translate(x,y);
         translateZ(z);
         translate3d(x,y,z);
         

• 缩放 scale

transform:scaleX(x);
          scaleY(y);
          scale(x,y);

• 旋转 rotate

transform:rotate(<angle>);
         rotateX(<x>deg);
         rotateY(<y>deg);
         rotateZ(<z>deg);

• 倾斜 skew
  transform:skew(,); skewX(deg); skewY(deg);

#### 一般需要配合transition过渡,inline元素不支持transform,需转换成block.

## @keyframes
```CSS
@keyframes name{
    from{
        <!--开始位置-->
    }
    to{
        <!--结束位置-->
    }
}
<!--或-->
@keyframes name{
    0%{         }
    30%{        }
    66%{        }
    100%{       }
}