css动画

浏览器渲染原理：

1. 根据HTML构建HTML树（DOM）
2. 根据css构建css树（cssDOM）
3. 将两棵树合并成一颗渲染树（render tree）
4. layout布局（文档流，盒模型，计算大小和位置）
5. paint（把边框颜色，文字颜色，阴影等画出来）
6. compose合成（根据层叠关系展示画面）

**  三种更新方式：**

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

transform四个功能：

• 位移translate：，translateX，translateY，translateZ，translate3d（x,y,z）x,y,z表示三个不同的立体方向，translate的另一种写法是translate（x，y）例子可以让方框绝对居中
• 缩放scale：transform：scale（1.5），放大到原来的1.5倍，如果想有动画效果，需要再添加transition：all 1s；
• 旋转rotate：transform:rotate(45deg) ,旋转45度，这个是以垂直于屏幕的轴旋转，rotatex是以x轴旋转，Y同理。
• 倾斜skew：transform：skewX(15deg)，绕x轴倾斜15度；或者transform:skewY，绕Y轴
• 而且以上功能可以组合使用，写法是在translate: 后面添加各个功能，需要用空格隔开

**   补充中间帧**

**   transition的四个属性：属性名，时长，过度方式，延迟**

**   display:none无法过渡到block**

animation动画：

**   需要添加关键帧：keyframes xxx{（需要在里面定义一些行为）**

}

然后还需添加：

**        #demo.start{**

**                   animation:xxx 1.5s  forwards (forwards可以使动画停在最后一帧)**

}

**如何使动画交替返回，animation中:alternate可以做加载动画

属性infinite可以控制动画次数为无限**