CSS3 动画的一些属性

 定义式
 @keyframes   动画名称{
      from{  }
      to{    }
 }

 调用式
 动画类似函数，只定义不调用是没效果的，所以要配合调用式使用。
 animation: 动画名称  动画时间  延时  时间曲线  播放次数  交替播放 ;

 animation: donghua 1s 1s infinite alternate linear;
 animation-name: donghua;       /*动画名称*/
 animation-duration: 1s;         /*动画时间*/
 animation-timing-function: linear;  /*时间曲线*/
 animation-delay: 1s;             /*动画延时*/
 animation-iteration-count: infinite;/*播放次数*/
 animation-direction: alternate;     /*交替播放*/

 显示最终状态

 animation-fill-mode: forwards ;
 PS：动画播放完毕，默认是回到最初的状态。（如果需要改变，设置  forwards ）
 动画暂停
 animation-play-state: paused;
 注意：动画暂停，不要写到animation复合属性里，因为复合写法有一定的兼容问题。

 多个中间状态的动画
 @keyframes   run{
     0%{    } 等价于from
     50%{   } 中间可以写入多个百分比状态 (帧动画)
     100%{  } 等价于to
 }

 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

 过渡
 transition：过渡属性    过渡时间    时间曲线    过渡延时。
 注意：它是一个复合属性。可通过Chrome查看。
 all 关键词 代表全部，较为常用。

 transition 简写属性，用于在一个属性中设置四个过渡属性。  用回调函数，每一次动画过渡完都让他停止 transform：none;
 transition-property 规定应用过渡的 CSS 属性的名称。
 transition-duration 定义过渡效果花费的时间。默认是 0。
 transition-timing-function 规定过渡效果的时间曲线。通过linear在F12下改变贝塞尔曲线
 transition-delay 规定过渡效果何时开始。默认是 0。  要单独写不能组合写，还有要在transition后面跟着，不要在前面单独写，（在前面有transition的前提下，因为这样会被覆盖不会执行他）

 2维（2D）转换（转换后结合过渡更为自然）

 核心属性：transform；

 核心值

 位移：  translate(x,y)
 旋转：  rotate(角度)  角度的单位是deg，默认是顺时针方向。
 缩放：     scale(缩放比例) 一般填入一个值即可，写2个值分别代表水平方向和垂直方向
 斜切：    skew(角度)

 旋转中心点

 transform-origin: x   y ;

 取值：

 固定值    如：100px  100px
 百分比    如：100%  100%
 方向值  top   bottom  left    right  center

 3维（3D）转换

 核心属性还是  transform，3维只是比2维多了1维。

 3维转换还是旋转，缩放，位移，只不过在后面多加了一个坐标系控制对应轴向（Z轴）。
 如 ：rotateX()   rotateY()   translateZ()
 它还有另一种写法：
 translate3d(x,y,z)
 scale3d(x,y,z)
 rotate3d(x,y,z,角度)
 注意：3维里没有斜切。
 经验：如果转换模块写成3维的形式，在手机端它开启硬件（GPU）加速，动画的性能有所提升。

 背部不可见

 backface-visibility:hidden;(结合百度钱包)刚开始就把他的

 透视
 perspective: 像素 ;
 透视属性是模拟人眼看物体近大远小的特征。
 添加透视属性的时候，注意不要添加给物体本身，一般我们会添加给父级。