常见的css3动画样式

1、转换
2、过渡
3、动画
4、CSS优化
1、转换
   1、什么是转换
      转换即改变元素的一些状态，大小、位置、形状
      可以是2d转换，也可以是3d的转换
      2d : 使元素在 x轴和 y轴上发生变化
      3d ：2d基础上增加了 z轴的变化
   2、转换属性
      CSS3转换属性:
transform : none / transform-function;
none:不转换，默认值
transform-function：表示要实现转换的函数
     旋转：rotate()
     位移：translate()
     缩放：scale()
transform:rotate(); -- 旋转操作
   3、转换原点：
        转换原点：即转换过程中围绕的中心点。
          默认情况下，原点是在整个元素的中间处
更改转换原点：
 transform-origin:
 取值 ：
    数值 ：以元素左上方的点为(0,0)，再去计算其他点
 百分比:
       0% , 0% : 左上方的点
50% ， 50% ：元素的中心点
 关键字:
       left
right
top
bottom
center
left top : 表示左上方
transform-origin赋值：
  一个值 ：x轴的移动
  两个值 ：x轴和y轴
  三个值 ：x轴，y轴，z轴
2、2D转换 - 位移
   位移：位置移动
          从当前元素的位置处，移动到指定坐标轴位置处
   函数：
       translate(x,y)
       translate(value);
       取值：  
            数值、百分比
   去负值
      x ：正 向右移动
          负 向左移动
      y : 正 向下移动
          负 向上移动
       单方向位移：
          translateX(x)
 translateY(y)
3、2D转换 - 缩放
   缩放：改变元素大小
   函数：scale(value)
scale(x,y)


取值：
   默认值 1
   缩小：0 - 1 之间的小数
   放大：大于1 
scaleX(x) : 横向缩放
scaleY(y) : 纵向缩放
4、2D转换 - 旋转
   围绕着指定点，按照指定的角度发生的旋转
   函数：rotate(-90deg)
         取值：deg 为角度 0-360
      默认为顺时针旋转
      deg取值为负的话，则将逆时针旋转
5、2D转换 - 倾斜
   函数：skew()
         取值 ：为角度
skewX(x)
         skewY(y)