动画原理

动画其实是由很多静止的图片连续显示，利用人眼的视觉残像产生错觉而误认为是活动的画面。其中每个静止的画面都叫帧。一般来讲，每秒显示的画面越多，动画越流畅。

浏览器渲染原理

不同浏览器渲染步骤可能不太一样，但大体过程是一样的。

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

当页面元素发生变化，浏览器如何渲染？？？
浏览器不会对页面所有修改属性的元素都按上面步骤重新渲染，为了提升浏览器性能，有三种方式来进行重新渲染。
怎么知道哪些属性会用哪种方式进行渲染???这是无规律的。可以通过下面这个网站查看。

csstriggers.com/

CSS动画

动画优化

js优化：使用requestAnimationFrame替代setTimeout或setInterval
css优化：使用 will-change 或 translateZ 提升移动的元素这些优化也没有一定规律，具体内容可以查看下面链接

developers.google.com/web/fundame…

transform

常用功能

一般都配合transition过渡
inline元素不支持transform，需要先变成block
translate(-50%,-50%)可做到绝对定位元素的居中
可以组合使用。例：tansform：scale(0.5) translate(-100%,-100%);
transform: none; 取消所有动画

位移 translate
缩放 scale
旋转 rotate
倾斜 skew

translate

可以在三维方向移动，值可以为负数，代表向负轴方向移动。当在z轴方向上移动时，需要指定透视点perspective translateX translateY translateZ tanslate3d（x,y,z)

scale

指定缩放倍数，当使用scale时，参数可以是一个，代表同时向x，y轴缩放用的较少，因为容易出现模糊

scaleX
scaleY
scale(x,[y])

rotate

使用rotate时，围绕一个定点(由transform-origin属性指定)旋转而不变形的转换。
参数都有单位度数（degree）简写deg
一般使用rotate（360deg），完成360度旋转用来制作loading样式

rotate
rotateZ
rotateX
rotateY
rotate3d

skew

用的较少，参数都有单位度数（degree）简写deg skewX skewY skew

transition

可以使用这个属性给动画添加过渡效果
并不是所有属性都能过渡

display: none;不能过渡
background颜色可以过渡
opacity透明度可以过渡可能是因为背景色与透明度的值都是数值性可以量化，所以可以过渡。

缩写语法

transition: 过渡属性名时长过渡方式延迟
初始值

其中时间参数如果是小数点，可以省略小数点前的零
具体参数可以查询mdn

animation

当动画有多个步骤时，可以使用多个transform这样比较繁琐，这时可以使用animation属性。

先使用@keyframes name｛｝将动画的状态描述出来
再使用animation属性进行动画过渡赋值

@keyframes完整语法

一种写法是from to
一种写法是百分数

animation缩写语法

animation：时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名;
初始值

次数可以用小数定义循环，来播放动画周期的一部分。
过渡方式与transition一样。
具体参数可以查询mdn

浏览器渲染与CSS动画