css动画

     CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。 

 

1.rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。

2.translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。

3.scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。

4.skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%